×
Namespaces

Variants
Actions

多点缩放WebView

From Nokia Developer 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 13:55.
190 page views in the last 30 days.
×