首页 文章

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

提问于
浏览 次
1

我正在使用视频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中执行此操作的替代方法是什么？

qt video qml

1 回答

  • 5

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

    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;
        }
    }
}

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

    首先，假设用户点击窗口左上角附近：

    enter image description here

    我们需要做的一件事是翻译视频本身，以便用户点击的点在屏幕上居中（变换可能不按此顺序完成，但更容易以这种方式可视化）：

    enter image description here

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

    这就是 zoomTranslate 的用途 .

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

    enter image description here

    这就是 zoomScale 的用途 .

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

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

    回复于

相关问题