Zooming/Scaling Flickable 中特定点的图像

Question

通过移动滑块，我希望能够在图像上缩放（放大）并且一旦缩放（放大），就能够四处移动，（轻弹）我在下面有这个例子，但是我的问题如下。

如果我放大、缩放，然后轻拂到图像上的一个点，然后我想进一步放大（缩放）window 中心的那个特定点，当我使用滑块缩放，缩放（缩放）发生在图像的中心，因为默认情况下 'transformOrigin' 是 Item.Center

尝试运行代码以了解我在说什么：（您需要更改图像源）

import QtQuick 2.12
import QtQuick.Controls 2.3


Item {
    id: mainId
    width: 1280
    height: 720
    property int scaleMultiplier: 3


    Flickable {
        id: flickArea
        anchors.fill: parent
        focus: true
        contentWidth: Math.max(inner.width * slider.value * scaleMultiplier, width)
        contentHeight: Math.max(inner.height  * slider.value * scaleMultiplier, height)
        anchors.centerIn: parent
        boundsBehavior: Flickable.StopAtBounds
        contentX: contentWidth === width ? 0 : inner.width * slider.value * scaleMultiplier / 2 - flickArea.width / 2
        contentY: contentHeight === height ? 0 : inner.height * slider.value * scaleMultiplier / 2 - flickArea.height / 2


        Image {
            id: inner
            scale: slider.value * scaleMultiplier
            anchors.centerIn: parent
            source: "test_images/1.png"
        }
    }

    Slider {
        id: slider
        value: .01
        orientation: Qt.Vertical
        anchors {
            bottom: parent.bottom
            right: parent.right
            top: parent.top
            margins: 50
        }

        from: 0.01
    }

}

我尝试像这样设置任意变换原点：

Image {
            id: inner
            scale: slider.value * scaleMultiplier
            anchors.centerIn: parent

            source: "test_images/1.png"

            transform: Scale {
                                id: scaleID ;
                                origin.x: flickArea.contentX + flickArea.width * flickArea.visibleArea.widthRatio / 2
                                origin.y: flickArea.contentY + flickArea.height * flickArea.visibleArea.heightRatio / 2
            }
        }

不过好像没什么效果。任何帮助表示赞赏。我错过了什么？

同样，我想要的是当我轻拂到图像上的特定点并放大时，我希望原点缩放到可视轻拂区域的中心区域。比如我放大了图片的右上角，然后我想再放大，再放大时，图片又回到了图片的中心。

谢谢。

Answer 1

为了后代，在@sierdzio 的帮助下找到了答案：

https://forum.qt.io/topic/105233/zooming-scaling-an-image-at-a-specific-point-within-a-flickable/2

我需要使用 Flickable 的 resizeContents() 方法

property real zoom: 1;
onZoomChanged: {
        var zoomPoint = Qt.point(flickArea.width/2 + flickArea.contentX,
                             flickArea.height/2 + flickArea.contentY);

        flickArea.resizeContent((inner.width * zoom), (inner.height * zoom), zoomPoint);
        flickArea.returnToBounds();
    }

和

// REMOVE THESE LINES:
contentWidth: Math.max(inner.width * slider.value * scaleMultiplier, width)
contentHeight: Math.max(inner.height  * slider.value * scaleMultiplier, height)
contentX: contentWidth === width ? 0 : inner.width * slider.value * scaleMultiplier / 2 - flickArea.width / 2
contentY: contentHeight === height ? 0 : inner.height * slider.value * scaleMultiplier / 2 - flickArea.height / 2

// Instead, do:
contentWidth: inner.width
contentHeight: inner.height

Zooming/Scaling Flickable 中特定点的图像

Zooming/Scaling an Image at a specific point within a Flickable

qt

qml

qt5

qtquick2

qtquickcontrols2