How to scale a particular point in a video in QML?

问题

I am using Video QML type to show a recorded video. http://doc.qt.io/qt-5/qml-qtmultimedia-video.html

I want to implement zoom feature there such that the user clicks on an area of the video display area, then that point becomes the center of the screen and some area around it zooms.

I have seen Scale QML type. http://doc.qt.io/qt-5/qml-qtquick-scale.html

Can it be used to do what I have described above? How? What is the alternative way to do this in Qt if it not possible in QML?

回答1:

Assuming that the video is as large as the window it's playing in:

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

I'll try to explain what's happening with the transforms. The black rectangle is the window, and the green rectangle is the video.

Firstly, suppose that the user clicks near the top left corner of the window:

One thing we need to is translate the video itself, so that the point that that the user clicked is centered on the screen (the transforms might not be done in this order, but it's easier to visualise it this way):

(The partially transparent black circle is the location of the click relative to the video surface)

This is what zoomTranslate is for.

We also need to scale the video, but it must happen around the correct point:

This is what zoomScale is for.

These images were done by hand, so they're not exactly to scale, but you get the point.

Note the behaviour that occurs when the user clicks on the video when it's already zoomed in - this is due to scaling, and is an exercise that I leave to you. ;)

来源：https://stackoverflow.com/questions/32991233/how-to-scale-a-particular-point-in-a-video-in-qml

标签

video

qml