Как изменить размер элемента после трансформации Scale?

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    GridLayout {
        id: grid
        anchors.fill: parent
        columnSpacing: 0
        Rectangle {
                id: plate
                Layout.leftMargin: (Layout.preferredWidth - Layout.preferredWidth*scale.xScale)/2 //это свойство автоматом для остальных Rectangle
                Layout.topMargin: Layout.preferredHeight - Layout.preferredHeight*scale.yScale
                Layout.preferredHeight: Layout.preferredWidth/2
                Layout.preferredWidth: window.width/3
                color: "lightblue"
                transform: [
                    Rotation {
                        id: rot
                        origin.x: plate.width/2
                        origin.y: plate.height/2
                        angle: 0
                        NumberAnimation on angle {
                            id: na
                            running: false
                            loops: Animation.Infinite
                            from: 0; to: 360
                            duration: 3000
                        }
                    },
                    Scale {
                        id: scale
                        xScale: 1
                        yScale: 1
                    }
                ]
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        na.running = true
                        scale.xScale = 0.5
                        scale.yScale = 0.5
                    }
                }
            }
        Rectangle {
                id: plate2
                Layout.topMargin: Layout.preferredHeight - Layout.preferredHeight*scale2.yScale
                Layout.preferredHeight: Layout.preferredWidth/2
                Layout.preferredWidth: window.width/3
                color: "lightgreen"
                transform: [
                    Rotation {
                        id: rot2
                        origin.x: plate2.width/2
                        origin.y: plate2.height/2
                        angle: 0
                        NumberAnimation on angle {
                            id: na2
                            running: false
                            loops: Animation.Infinite
                            from: 0; to: 360
                            duration: 3000
                        }
                    },
                    Scale {
                        id: scale2
                        xScale: 1
                        yScale: 1
                    }
                ]
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        na2.running = true
                        scale2.xScale = 0.5
                        scale2.yScale = 0.5
                    }
                }
            }
        Rectangle {
                id: plate3
                Layout.topMargin: Layout.preferredHeight - Layout.preferredHeight*scale3.yScale
                Layout.preferredHeight: Layout.preferredWidth/2
                Layout.preferredWidth: window.width/3
                color: "tomato"
                transform: [
                    Rotation {
                        id: rot3
                        origin.x: plate3.width/2
                        origin.y: plate3.height/2
                        angle: 0
                        NumberAnimation on angle {
                            id: na3
                            running: false
                            loops: Animation.Infinite
                            from: 0; to: 360
                            duration: 3000
                        }
                    },
                    Scale {
                        id: scale3
                        xScale: 1
                        yScale: 1
                    }
                ]
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        na3.running = true
                        scale3.xScale = 0.5
                        scale3.yScale = 0.5
                    }
                }
            }
}
}

А теперь по существу. Если я в свойствах изначально задаю x и y, то это координаты относительно элемента грида. Но если я по событию его присвою, то оно становится относительно самого грида. А мне же нужно управлять расположением внутри элемента при масштабировании! Anchors.CenterIn, horizontalCenter, verticalCenter относительно мифического Layout не действуют. Единственное что влияет на положение внутри элемента, так это отступы. И вот тут какой-то баг. Layout.topMargin надо задавать для каждого элемента отдельно, а Layout.leftMargin достаточно задать для одного из элементов и этот отступ будет действовать на все. И при клике происходит сдвиг всех. Криво реализовано. Я бы искал другой путь решения задачи, от GridView до группы Rectangle.

А вообще в большинстве случаев пытаться задавать ширину и высоту через width и height для объекта, когда он находится внутри размещения (RowLayout, ColumnLayout, GridLayout) бесполезно. Эти параметры задаются через attach property Layout.

То есть как у вас сделано через Layout.prefferedWidth и т.д. Через эти свойства можно указать некоторые параметры размеров и отступы от внутренних направляющих. Но не все возможные варианты можно реализовать к сожалению.

Что касается работы scale и т.д. То тут есть некоторый нюанс с координатной системой. Каждый графический Item (не забываем, что всё наследовано от QQuitkItem в итоге, кроме некоторых особых реализаций) имеет отношение к координатной системе родительского объекта, а также свою собственную координатную систему. Так вот в его внутренней координатной системе и происходит вся отрисовка. И если вы делаете масштабирование, то масштабируется его внутренняя координатная система со всеми отрисованными внутри объектами. С этой точкой зрения с некоторым упрощением можно допустить, что каждый графический Item - это маленькая графическая сцена. Области отрисовки графической сцены тогда остаётся таже самая, а вот содержимое изменяет масштаб.

Что касается абсолютного позиционирования, то гляньте эту статью . Там используется матрица с указанием указателей (id) на объекты. И через всю эту обвязку сделано расположение объектов.