Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

多点缩放WebView

From Wiki
Jump to: navigation, search
Article Metadata

代码示例
兼容于
平台:
Symbian

文章
zhouhl 在 08 May 2011 创建
最后由 hamishwillee 在 13 Jun 2012 编辑

Contents

引言

本文为大家介绍如何使得用QML写的网页能够支持多点缩放。

获取Multi touch事件

由于目前的QML还不支持PinchArea ,因此我们如果想在QML中获得Pinch事件就需要用Qt C++ 代码来做。简单的做法是我们重写

QmlApplicationViewer::viewportEvent ( QEvent * event ) [virtual protected]

比如在例子程序中:

bool TouchApplicationViewer::viewportEvent(QEvent *event)
{
if (!m_touch)
{
return QDeclarativeView::viewportEvent(event);
}
 
switch (event->type())
{
case QEvent::TouchBegin:
case QEvent::TouchUpdate:
case QEvent::TouchEnd:
m_touch->update(*(static_cast<QTouchEvent *>(event)));
return true;
default:
return QDeclarativeView::viewportEvent(event);
}
}

其中TouchApplicationViewer 继承自QmlApplicationViewer。在这里面我们就可以获得TouchBegin、TouchUpdate和TouchEnd等Touch事件了。简单的做法我们可以直接在这里面进行处理。然而我们为了易于扩展,我们把处理过程交给一个继承自QObject的MultiTouch的类进行处理。

void MultiTouch::update(QTouchEvent& event)
{
switch (event.type()) {
case QEvent::TouchBegin:
case QEvent::TouchUpdate:
case QEvent::TouchEnd:
{
QTouchEvent *touchEvent = &event;
QList<QTouchEvent::TouchPoint> touchPoints = touchEvent->touchPoints();
if (touchPoints.count() == 2) {
// determine scale factor
const QTouchEvent::TouchPoint &touchPoint0 = touchPoints.first();
const QTouchEvent::TouchPoint &touchPoint1 = touchPoints.last();
qreal currentScaleFactor =
QLineF(touchPoint0.pos(), touchPoint1.pos()).length()
/ QLineF(touchPoint0.startPos(), touchPoint1.startPos()).length();
if(currentScaleFactor>1)
{
currentScaleFactor *= 0.8;
}
if (touchEvent->touchPointStates() & Qt::TouchPointReleased) {
totalScaleFactor *= currentScaleFactor;
currentScaleFactor = 1;
}
 
qreal temp = totalScaleFactor * currentScaleFactor;
if (temp < 0.5)
temp= 0.5;
if (temp > 2.5)
temp= 2.5;
emit scaleFactor(QVariant(temp));
 
}
 
break;
}
 
default:
break;
}
 
}

我们这里发出一个scaleFactor(QVariant(temp))信号,将当前缩放的比例信息通知给QML。


将C++的信号连接到QML

在Main.cpp中:

    MultiTouch touch;
TouchApplicationViewer viewer(&touch);
viewer.rootContext()->setContextProperty("multitouch", &touch);
 
viewer.setMainQmlFile(QLatin1String("qml/QmlMultitouch/main.qml"));
 
QObject *rootObject = (QObject*)viewer.rootObject();
QObject::connect(&touch, SIGNAL(scaleFactor(const QVariant&)),
rootObject, SLOT(scaleChanged(const QVariant&)));


main.qml:

main.qml:

import QtQuick 1.0
import QtWebKit 1.0
 
Rectangle {
id: root
width: 360
height: 640
 
function scaleChanged(scale) {
console.log(scale);
web.scale = scale;
flic.contentWidth= web.width * scale
flic.contentHeight= web.height * scale
}
 
 
Flickable{
id: flic
objectName: "flickObj"
width: 360
height: 640
 
contentWidth: web.width
contentHeight: web.height
anchors.fill: parent
 
WebView {
id: web
anchors.centerIn: parent
url : "http://www.baidu.com/"
visible: !image.visible
onLoadFinished : image.visible= false
}
 
 
Image {
id: image
source: "spinner.png";
visible: true
x:160
y:300
NumberAnimation on rotation {
running: image.visible ; from: 0; to: 360;
loops: Animation.Infinite; duration: 2000
}
}
 
}
 
}

我们这里通过scale 属性对网页进行缩放



下载例程

Media:MultitouchWebview.zip


相关链接

This page was last modified on 13 June 2012, at 10:55.
135 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×