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

【问题标题】：How to scale a particular point in a video in QML?如何在 QML 中缩放视频中的特定点？
【发布时间】：2016-01-04 15:01:36
【问题描述】：

我正在使用 Video 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】：

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

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

这些图片是手工制作的，所以它们并没有完全按比例缩放，但你明白了。

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

【讨论】：

您创建了图像来解释这一点。圣牛，你用最后一个赢得了互联网。 :P
哈哈，谢谢。 :) 我有时会觉得这样的事情很难，所以希望其他人能从这些图片中受益。
我完全同意你的看法。一张图片有时值一千个字。
我确实运行了你的程序，但我不确定这是否是我想要的。当我第一次点击视频时，整个视频会移动到其他位置。这不是我想要的。用户应该感觉到视频仍然在它原来的位置，即使它已经被移动了。我错过了什么？
所以你不希望视频在屏幕上居中，你只希望它与点击位置的原点一起缩放？请更新您的问题以更清楚。也许使用一些图像。 :p