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

Question

I use the QML video type to display the recorded video. http://doc.qt.io/qt-5/qml-qtmultimedia-video.html

I want to implement the zoom function where the user clicks on the area of ​​the video display area, then this point becomes the center of the screen, and the area around it is scaled.

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

Can I use what I described above? How? What is an alternative way to do this in Qt if this is not possible in QML?

Answer 1

Assuming the video is the size of the window in which it plays:

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 will try to explain what happens to the transformations. The black rectangle is the window, and the green rectangle is the video.

First, suppose the user clicks in the upper left corner of the window:

We need to translate the video, so that the point that the user clicked is focused on the screen (conversions may not be performed in this order, but it’s easier to visualize it this way):

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

This is what zoomTranslate for.

We also need to scale the video, but it should happen around the right point:

This is what zoomScale for.

These images were made manually, so they don't scale exactly, but you get the point.

Pay attention to the behavior that occurs when a user clicks on a video when it is already zoomed in - this is due to scaling, and this is an exercise that I leave to you.;)