Time for action – rotating and scaling a picture by pinching

Start a new Qt Quick UI project. In the QML file, delete everything but the external item. Then, add an image to the UI and make it centered in its parent:

Image {
  id: image
  anchors.centerIn: parent
  source: "wilanow.jpg"
}

Now, we will add a PinchArea element. This kind of item can be used in two ways–either by manually implementing signal handlers onPinchStarted, onPinchUpdated, and onPinchFinished to have total control over the functionality of the gesture or by using a simplified interface similar to the drag property of MouseArea. Since the simplified interface does exactly what we want, there is no need to handle pinch events manually. Let's add the following declaration to the file:

PinchArea {
  anchors.fill: parent
  pinch {
    target: image
    minimumScale: 0.2; maximumScale: 2.0
    minimumRotation: -90; maximumRotation: 90
  }
}

You'll get an output similar to the following screenshot...