Zoom with finger touch on QML and buttom for reset zoom - qt

Question

How to QML with two fingers to zoom in the photo?
I wrote the following code for the Click also I want a button for reset zoom to screen size and i want a buttom for back but for each screen position is different
please help me.
Thank you
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
Window {
id: win
visible: true
width: Screen.width
height: Screen.height
Rectangle {
id: ali
width: win.width
height: win.height
ScrollView {
width: win.width
height: win.height
Rectangle {
id: inspector
Image {
id: visibleImg
x: 0
y: 0
source: "qrc:///pic/1.jpg"
width: inspector.width
height: inspector.height
focus: true
Keys.onPressed: {
if (event.key == Qt.Key_VolumeDown) {
inspector.width=inspector.width+50
inspector.height=inspector.height+50
event.accepted = true;
}
}
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton
onClicked:{
if (mouse.button == Qt.LeftButton){
inspector.width=inspector.width+50
inspector.height=inspector.height+50
}
}
}
width: win.width
height: win.height
}
}
Button {
id: button1
x: 1
y: win.width+12
width: 25
height: 25
text: qsTr("+")
onClicked: {
inspector.width=inspector.width+50
inspector.height=inspector.height+50
}
}
Button {
id: button2
x: 1
y: win.width+37
width: 25
height: 25
text: qsTr("-")
onClicked: {
inspector.width=inspector.width-50
inspector.height=inspector.height-50
}
}
anchors.centerIn: ali
}
}

Answer 1

Try with this example :
https://github.com/yekmen/mee500px/blob/master/tags/0.0.5Beta/Mee500px/qml/Mee500px/Tools/ZoomableImage.qml
Work fine !
edit : Update link !

Answer 2

I could change the code as follows:
But only two-finger zoom it down
And the photo can not be moved
Also I'm 10 photos
I want to give everyone the same two buttons display
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Dialogs 1.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
Window {
id: win
visible: true
width: 240
height: 320
title: "aseman-abi"
Rectangle {
id: ali
width: win.width
height: win.height
Rectangle {
id: photoFrame
x: 0
y: 0
width: win.width
height: win.height
color: "#ffffff"
PinchArea {
anchors.fill: parent
pinch.target: photoFrame
pinch.minimumScale: 1
pinch.maximumScale: 5
}
BorderImage {
id: borderImage1
anchors.fill: parent
source: "qrc:///pic/1.jpg"
}
}
Button {
id: button2
x:10
y: win.height-37
width: 50
height:40
text: qsTr("N")
onClicked: {
borderImage1.source="qrc:///pic/2.jpg"
}
}
Button {
id: button3
x: win.width-71
y: win.height-37
width: 50
height: 40
text: qsTr("P")
onClicked: {
borderImage1.source="qrc:///pic/1.jpg"
}
}
}
}