使用QML和buttom進行手指放大縮放以進行重置zoom

Question

如何使用兩根手指放大照片來進行QML？ 我寫了下面的代碼爲點擊還我想要一個按鈕重置縮放到屏幕大小，我想要一個buttom回來，但對於每個屏幕位置是不同的 請幫助我。 謝謝

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

我可以改變下列代碼： 但只有兩個手指放大下來 而照片不能移動 還有我10張 我想給每個人都一樣兩個按鈕顯示

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

Answer 2

嘗試使用這個例子：

https://github.com/yekmen/mee500px/blob/master/tags/0.0.5Beta/Mee500px/qml/Mee500px/Tools/ZoomableImage.qml

工作正常！

編輯：更新鏈接！