Question

在下面的应用程序中，您可以单击场景中的任意位置以使“视图”居中于该点。

import QtQuick 2.7
import QtQuick.Controls 2.2

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    property real zoom: 1
    property point offset
    property point scenePosToCentreOn

    Item {
        id: sceneView
        anchors.fill: parent

        MouseArea {
            anchors.fill: parent
            onClicked: {
                scenePosToCentreOn = scene.mapFromItem(sceneView, mouse.x, mouse.y)
                offset = Qt.point(scenePosToCentreOn.x - width / 2,
                                  scenePosToCentreOn.y - height / 2);
            }
            onWheel: {
                var zoomFactor = Math.pow(1.4, wheel.angleDelta.y / 120.0);
                var newZoom = Math.min(8.0, Math.max(0.25, zoom * zoomFactor));
                zoom = newZoom;
            }
        }

        Item {
            id: scene
            implicitWidth: backgroundImage.implicitWidth
            implicitHeight: backgroundImage.implicitHeight

            transform: [
                Translate {
                    x: -offset.x
                    y: -offset.y
                },
                Scale {
                    xScale: zoom
                    yScale: zoom
                }
            ]

            Image {
                id: backgroundImage
                source: "http://cdn.akamai.steamstatic.com/steam/apps/393010/ss_29cf93db42617dd08ceb0a0bf0a4b62ad12a1cfc.1920x1080.jpg?t=1459456906"
            }

            Rectangle {
                x: scenePosToCentreOn.x - width / 2
                y: scenePosToCentreOn.y - height / 2
                width: 8
                height: width
                radius: width / 2
                color: "#fff"
            }

            Rectangle {
                anchors.fill: parent
                color: "transparent"
                border.color: "darkorange"
                border.width: 4

                Label {
                    text: "Scene"
                }
            }
        }

        Label {
            text: zoom.toFixed(2)
            font.pixelSize: Qt.application.font.pixelSize * 2
            color: "salmon"
            anchors.right: parent.right
            anchors.bottom: parent.bottom
        }
    }
}

我希望能够放大和缩小所选的点（scenePosToCentreOn）。它目前在zoom为1时有效，但似乎其起源位于屏幕的左上角，用于显示任何其他zoom值。我怀疑我从变换列表中遗漏了一些东西，但我无法弄明白。

Answer 1

您需要进行补偿，因为您计算定心位置并应用比例。

    Translate {
      x: -offset.x + (((1 / zoom) - 1) * (sceneView.width * .5))
      y: -offset.y + (((1 / zoom) - 1) * (sceneView.height * .5))
    },

放大图像同时保持图像居中

1 个答案: