qt - 如何使用 QML Scale Element 进行不同来源的增量缩放

Question

我正在尝试使用 QML Scale Element 围绕用户单击的点执行 View 缩放，但它并不总是按照文档中的说明工作。

要重现该问题，请运行下面的最小 QML 示例(我在 Ubuntu 14.04 x86_64 上使用 Qt 5.3.1)，然后:

单击左上角蓝色矩形的中心。

看到一切都被放大了，但蓝色矩形的中心仍然在你的点击位置。这是在 http://doc.qt.io/qt-5/qml-qtquick-scale.html 中记录的- “[原点] 保存了项目的缩放点(即，随着项目的其余部分的增长，相对于父项保持固定的点)。

现在单击红色矩形的中心。

看到一切都放大了，但红色矩形的中心做了不是 停留在您的点击点，它被向上和向左翻译。这不是记录的那样。

我的目标是拥有它 总是 正确缩放保持单击点为原点，如文档中所述。

附言有趣的是，如果您现在再次单击红色矩形的中心，它会按照 promise 围绕该点放大。现在再次单击蓝色矩形的中心，您会看到相同的意外翻译行为。

P.P.S.我正在开发一个应用程序，用户可以在该应用程序中鼠标滚轮/捏合包含矩形的任何位置，并且里面的所有内容都应该围绕鼠标/捏合位置放大或缩小。许多应用程序都具有这种行为。参见例如inkscape。

import QtQuick 2.2
import QtQuick.Controls 1.1

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        x: 100
        y: 100
        width: 300
        height: 300

        transform: Scale {
            id: tform
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log(mouse.x + " " + mouse.y)
                tform.xScale += 0.5
                tform.yScale += 0.5
                tform.origin.x = mouse.x
                tform.origin.y = mouse.y
            }
        }

        Rectangle {
            x: 50
            y: 50
            width: 50
            height: 50
            color: "blue"
        }

        Rectangle {
            x: 100
            y: 100
            width: 50
            height: 50
            color: "red"
        }

    }

}

(我将此作为 Qt 错误提交，因为该行为不遵循文档。在撰写本文时，该错误似乎已被归类为“重要”。 https://bugreports.qt.io/browse/QTBUG-40005 - 我仍然非常愿意接受以下建议变通方法/修复在这里)

Answer 1

其实是不是 一种异常行为，与您在阅读文档后可能期望的行为不同。

当您更改矩形的缩放变换时，变换将应用于原始矩形。从原始矩形的角度来看，您单击的点保持在同一位置。
这就是为什么当您单击一个角然后单击对角时您的矩形“移动”这么多的原因。

为了实现你想要的，你不能依赖变换原点。您必须设置矩形的实际 x y 坐标。

这是一个工作示例:

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rect
        x: 100
        y: 100
        width: 300
        height: 300

        Rectangle {
                x: 50
                y: 50
                width: 50
                height: 50
                color: "blue"
            }

            Rectangle {
                x: 100
                y: 100
                width: 50
                height: 50
                color: "red"
            }


        transform: Scale {
            id: tform
        }

        MouseArea {
            anchors.fill: parent
            property double factor: 2.0
            onWheel:
            {
                if(wheel.angleDelta.y > 0)  // zoom in
                    var zoomFactor = factor
                else                        // zoom out
                    zoomFactor = 1/factor   

                var realX = wheel.x * tform.xScale
                var realY = wheel.y * tform.yScale
                rect.x += (1-zoomFactor)*realX
                rect.y += (1-zoomFactor)*realY
                tform.xScale *=zoomFactor
                tform.yScale *=zoomFactor

            }
        }
    }
}