Simple Transformations

A transformation manipulates the geometry of an object. QML Items can, in general, be translated, rotated and scaled. There is a simple form of these operations and a more advanced way.

Let’s start with the simple transformations. Here is our scene as our starting point.

A simple translation is done via changing the x,y position. A rotation is done using the rotation property. The value is provided in degrees (0 .. 360). A scaling is done using the scale property and a value <1 means the element is scaled down and >1 means the element is scaled up. Rotation and scaling do not change an item’s geometry: the x,y and width/height haven’t changed; only the painting instructions are transformed.

Before we show off the example I would like to introduce a little helper: the ClickableImage element. The ClickableImage is just an image with a mouse area. This brings up a useful rule of thumb - if you have copied a chunk of code three times, extract it into a component.

  1. // ClickableImage.qml
  2. // Simple image which can be clicked
  4. import QtQuick
  6. Image {
  7.     id: root
  8.     signal clicked
  10.     MouseArea {
  11.         anchors.fill: parent
  12.         onClicked: root.clicked()
  13.     }
  14. }

Simple Transformations - 图1

We use our clickable image to present three objects (box, circle, triangle). Each object performs a simple transformation when clicked. Clicking the background will reset the scene.

  1. // transformation.qml
  3. import QtQuick
  5. Item {
  6.     // set width based on given background
  7.     width: bg.width
  8.     height: bg.height
  10.     Image { // nice background image
  11.         id: bg
  12.         source: "assets/background.png"
  13.     }
  15.     MouseArea {
  16.         id: backgroundClicker
  17.         // needs to be before the images as order matters
  18.         // otherwise this mousearea would be before the other elements
  19.         // and consume the mouse events
  20.         anchors.fill: parent
  21.         onClicked: {
  22.             // reset our little scene
  23.             circle.x = 84
  24.             box.rotation = 0
  25.             triangle.rotation = 0
  26.             triangle.scale = 1.0
  27.         }
  28.     }
  30.     ClickableImage {
  31.         id: circle
  32.         x: 84; y: 68
  33.         source: "assets/circle_blue.png"
  34.         antialiasing: true
  35.         onClicked: {
  36.             // increase the x-position on click
  37.             x += 20
  38.         }
  39.     }
  41.     ClickableImage {
  42.         id: box
  43.         x: 164; y: 68
  44.         source: "assets/box_green.png"
  45.         antialiasing: true
  46.         onClicked: {
  47.             // increase the rotation on click
  48.             rotation += 15
  49.         }
  50.     }
  52.     ClickableImage {
  53.         id: triangle
  54.         x: 248; y: 68
  55.         source: "assets/triangle_red.png"
  56.         antialiasing: true
  57.         onClicked: {
  58.             // several transformations
  59.             rotation += 15
  60.             scale += 0.05
  61.         }
  62.     }
  64.     // ...

Simple Transformations - 图2

The circle increments the x-position on each click and the box will rotate on each click. The triangle will rotate and scale the image up on each click, to demonstrate a combined transformation. For the scaling and rotation operation we set antialiasing: true to enable anti-aliasing, which is switched off (same as the clipping property clip) for performance reasons. In your own work, when you see some rasterized edges in your graphics, then you should probably switch smoothing on.

TIP

To achieve better visual quality when scaling images, it is recommended to scale down instead of up. Scaling an image up with a larger scaling factor will result in scaling artifacts (blurred image). When scaling an image you should consider using smooth: true to enable the usage of a higher quality filter at the cost of performance.

The background MouseArea covers the whole background and resets the object values.

TIP

Elements which appear earlier in the code have a lower stacking order (called z-order). If you click long enough on circle you will see it moves below box. The z-order can also be manipulated by the z property of an Item.

Simple Transformations - 图3

This is because box appears later in the code. The same applies also to mouse areas. A mouse area later in the code will overlap (and thus grab the mouse events) of a mouse area earlier in the code.

Please remember: the order of elements in the document matters.