What is the application order of transforms for QML Item?

Question

A QML Item may have several transforms in several forms: translation via x and y properties, rotaion via rotation properties group, scaling via scale properties group, and finally it has the transform property which contains a list of transformations to apply.

Clearly the transformations in the transform list are applied in order as they are declared. But what is the order of the rest of transforms, will rotation be applied first or scale? and the translation will be applied after both of them? and if the transform list is specified will it be applied before or after other transformations have been applied?

Answer 1

QML has built-in smarts for inferring the origin of the transformations, so, often, you don't have to do anything, for instance, in the following, the 40x40 red Rectangle will rotate and scale and stay centered inside the 200x200 orange Rectangle.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    Rectangle {
        anchors.centerIn: parent
        width: 200; height: 200
        color: "orange"
        Rectangle {
            x: 80; y: 80; width: 40; height: 40
            color: "red"
            rotation: rot.value
            scale: sc.value
        }
    }
    ColumnLayout {
        Slider { id: rot; from: 0; to: 360 }
        Slider { id: sc; from: 0.5; to: 5.0; value: 1 }
    }
}

This means, most often, you should have no need to set transform and rely that rotation and scale will do the job for you.

In some cases, you may want to intentionally move and manipulate the origin of your rotation and scale. You can do this by introducing a placeholder Item and assigning the rotation and scale to different elements:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    Rectangle {
        anchors.centerIn: parent
        width: 200; height: 200
        color: "orange"
        Item {
            x: 100 + 10
            y: 100 + 10
            Rectangle {
                x: -20 - 10; y: -20 - 10; width: 40; height: 40
                color: "red"
                rotation: rot.value
            }
            scale: sc.value
        }
    }
    ColumnLayout {
        Slider { id: rot; from: 0; to: 360 }
        Slider { id: sc; from: 0.5; to: 5.0; value: 1 }
    }
}