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的用途。

这些图片是手工完成的，所以他们并没有完全进行缩放，但是你明白了。

请注意当用户点击视频时已经放大的行为 - 这是由于缩放，这是我留给您的练习。 ;）

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

1 个答案: