如何缩放 QML 矩形而不缩放任何子文本

Question

我有下面概述的 QML 组件。我遇到的问题是，当我使用捏合区域缩放矩形时（我希望发生这种情况），作为该矩形子级的文本也会缩放（我不希望发生这种情况）。 是什么导致文本缩放？鉴于

Text

的

scale

属性明确设置为

1.0

及其

font.pointSize

，我根本无法理解为什么文本会发生变化。如何创建属于可缩放组件一部分的文本，而不需要文本本身缩放？

QML代码：

import QtQuick 2

Rectangle {
    id: page
    width: 1000; height: 1000
    color: "black"

    Rectangle {
        id: image_boundary
        color: "green"
        width: 200
        height: 100
        x: (parent.width/2)-(image_boundary.width/2)
        y: (parent.height/2)-(image_boundary.height/2)

        onScaleChanged: {
            console.log("Scale changed:", scale)
        }

        PinchArea {
            anchors.fill: image_boundary
            property real initialScale: 1.0
            property real scale: 1.0
            id: pinch_area

            onPinchStarted: {
                initialScale = scale
            }

            onPinchUpdated: function(pinch) {
                scale = initialScale * pinch.scale
                console.log(scale)
                parent.scale = scale
            }
        }
        Text {
            text: "mumble mumble"
            font.pointSize: 10
            scale: 1.0
            color: "yellow"
            anchors.left: parent.right
        }
    }
}

我可以使用以下 python 代码（使用 PySide6）运行：

import sys
from pathlib import Path
from PySide6.QtQuick import QQuickView
from PySide6.QtCore import QUrl
from PySide6.QtGui import QGuiApplication


if __name__ == '__main__':

    #Set up the application window
    app = QGuiApplication(sys.argv)
    view = QQuickView()
    view.setResizeMode(QQuickView.SizeRootObjectToView)

    #Load the QML file
    qml_file = Path(__file__).parent / "test_qml_file.qml"
    view.setSource(QUrl.fromLocalFile(qml_file.resolve()))

    #Show the window
    if view.status() == QQuickView.Error:
        sys.exit(-1)
    view.show()

    #execute and cleanup
    app.exec()
    del view

Answer 1

如果您不想改变文本，那么它不应该是子文本。您仍然可以将文本放置在矩形内，但使其成为父窗口或其他中间项的子项。

Rectangle {
    id: page
    width: 1000; height: 1000
    color: "black"

    Rectangle {
        id: image_boundary
        color: "green"
        width: 200
        height: 100
        x: (parent.width/2)-(image_boundary.width/2)
        y: (parent.height/2)-(image_boundary.height/2)

        PinchArea {
            ...
        }
    }

    Text {
        text: "mumble mumble"
        font.pointSize: 10
        color: "yellow"
        anchors.top: image_boundary.top
        anchors.left: image_boundary.right
    }
}