在Flickable中的特定点缩放/缩放图像

Question

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

如果我放大，缩放，然后在图像上的一个点上轻击，那么我想在窗口中心的那个特定点上进一步放大(缩放)，当我使用滑块缩放时，缩放(缩放)发生在图像的中心，因为默认情况下'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