方法

這裡使用的是drag屬性實現，其實還可以將圖片置於ScrollView中實現拖拽，或者是放在Flickable中。

效果

程式碼

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 1620
    height: 720
    title: qsTr("Hello World")

    Item{
        id: mapItemArea
        width: 1600
        height: 700
        anchors.centerIn: parent
        clip: true
        Image {
            id: mapImg
            //這裡使圖片居中顯示
            x: mapItemArea.width/2-mapImg.width/2
            y: mapItemArea.height/2-mapImg.height/2
            source: "file:///C:/Image/myPic.jpg"
            //影象非同步載入，只對本地影象有用
            asynchronous: true
        }
        MouseArea {
            id: mapDragArea
            anchors.fill: mapImg
            drag.target: mapImg
            //這裡使圖片不管是比顯示框大還是比顯示框小都不會被拖拽出顯示區域
            drag.minimumX: (mapImg.width > mapItemArea.width) ? (mapItemArea.width - mapImg.width) : 0
            drag.minimumY: (mapImg.height > mapItemArea.height) ? (mapItemArea.height - mapImg.height) : 0
            drag.maximumX: (mapImg.width > mapItemArea.width) ? 0 : (mapItemArea.width - mapImg.width)
            drag.maximumY: (mapImg.height > mapItemArea.height) ? 0 : (mapItemArea.height - mapImg.height)

            //使用滑鼠滾輪縮放
            onWheel: {
                //每次滾動都是120的倍數
                var datla = wheel.angleDelta.y/120;
                if(datla > 0)
                {
                    mapImg.scale = mapImg.scale/0.9
                }
                else
                {
                    mapImg.scale = mapImg.scale*0.9
                }
            }
        }
    }
}