如何在QML中缩放视频中的特定点？

Question

我使用视频QML类型来显示录制的视频.http://doc.qt.io/qt-5/qml-qtmultimedia-video.html

我想在那里实现缩放功能,以便用户点击视频显示区域的某个区域,然后该点成为屏幕的中心,并且它周围的某些区域会缩放.

我见过Scale QML类型.http://doc.qt.io/qt-5/qml-qtquick-scale.html

可以用来做我上面描述的吗？怎么样？如果在QML中不可能,在Qt中执行此操作的替代方法是什么？

Answer 1

假设视频与正在播放的窗口一样大:

import QtQuick 2.0
import QtQuick.Window 2.0
import QtMultimedia 5.0

Window {
    visible: true
    width: 512
    height: 512

    Video {
        id: video
        anchors.fill: parent
        source: "file:///home/micurtis/.local/share/Trash/files/qquickwidget.avi"
        autoPlay: true

        transform: [
            Scale {
                id: zoomScale
            },
            Translate {
                id: zoomTranslate
            }
        ]

        focus: true
        Keys.onSpacePressed: video.playbackState == MediaPlayer.PlayingState ? video.pause() : video.play()
        Keys.onLeftPressed: video.seek(video.position - 5000)
        Keys.onRightPressed: video.seek(video.position + 5000)
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.AllButtons
        onClicked: {
            var zoomIn = mouse.button === Qt.LeftButton;
            zoomScale.origin.x = mouse.x;
            zoomScale.origin.y = mouse.y;
            zoomScale.xScale = zoomIn ? 2 : 1;
            zoomScale.yScale = zoomIn ? 2 : 1;
            zoomTranslate.x = zoomIn ? video.width / 2 - mouse.x : 0;
            zoomTranslate.y = zoomIn ? video.height / 2 - mouse.y : 0;
        }
    }
}

我将尝试解释变换发生了什么.黑色矩形是窗口,绿色矩形是视频.

首先,假设用户点击窗口左上角附近:

我们需要做的一件事是翻译视频本身,以便用户点击的点在屏幕中心(变换可能不按此顺序完成,但更容易以这种方式显示):

(部分透明的黑色圆圈是点击相对于视频表面的位置)

这zoomTranslate是为了什么.

我们还需要缩放视频,但必须围绕正确的点进行:

这zoomScale是为了什么.

这些图像是手工完成的,所以它们并不完全按比例绘制,但是你明白了.

请注意当用户在放大视频时点击视频时发生的行为 - 这是由于缩放,这是我留给您的练习.;)