Zoom with finger touch on QML and buttom for reset zoom

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