Enabling pinch zooming in QGraphicsWebView with QPinchGesture

From Nokia Developer Wiki
Jump to: navigation, search

This article shows how to use QPinchGesture to add support for pinch-zooming to a QGraphicsWebView.

Article Metadata
Keywords: QPinchGesture, QGraphicsWebView
Created: isalento (09 Dec 2010)
Last edited: hamishwillee (11 Oct 2012)

Code overview

Our first step is to enable touch events. This enables us to receive TouchBegin event.

MyWebView::MyWebView(QGraphicsItem *parent) :
setAcceptTouchEvents(true); //set this to receive touch events

Pinch gesture is enabled by calling grabGesture(Qt::PinchGesture) ; . This will make MyWebView as the target for QGestureEvents. Standard event handling needs to bypassed by reimplementing QGraphicsWebView’s sceneEvent(QEvent *event).

bool MyWebView::sceneEvent(QEvent *event)
case QEvent::TouchBegin:
//accepting touch begin allows us to get touch updates
return true;
case QEvent::Gesture:
return gestureEvent(static_cast<QGestureEvent*>(event));
return QGraphicsWebView::sceneEvent(event);

TouchBegin event must be accepted before you will receive additional TouchUpdate and TouchEnd events, which are needed by gesture recognizer to work.

When Gesture -event is received we pass it to gestureEvent- handler that inspects type of the gesture and forwards it to pinchGesture handler. Using gestureEvent handler is useful when you want to play with multiple gestures.

bool MyWebView::gestureEvent(QGestureEvent *event)
if (QGesture *pinch = event->gesture(Qt::PinchGesture)){
pinchTriggered(static_cast<QPinchGesture *>(pinch));
return true;

The last step is to zoom the current page according to user input. It is a good idea to limit the possible zoom factor to a certain interval as very big and small zoom levels are seldom useful.

void MyWebView::pinchTriggered(QPinchGesture *gesture)
QPinchGesture::ChangeFlags changeFlags = gesture->changeFlags();
if (changeFlags & QPinchGesture::ScaleFactorChanged) {
qreal value = gesture->scaleFactor();
qreal zoom = value*zoomFactor();
if(zoom < 2 && zoom > 0.5){
qDebug()<< "zooming";

More information

Check your SDK gesture example for how to use pan and swipe events:

This page was last modified on 11 October 2012, at 04:16.
72 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.