qml 图片浏览器旋转、按鼠标缩放

看看这些90后都开始付费了，我也来赶个时髦，要的自取：

代码很简单的，2个文件：

import QtQuick 2.11
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Item {
    id:button
    property string text: "button"
    signal myClicked
    implicitWidth: 70;
    implicitHeight: parent.height; // 35

    anchors.leftMargin: 8
    anchors.bottom: parent.bottom
    //anchors.bottomMargin: 8
    Button {
        id: myBtn
        width: parent.width
        height: parent.height
        text: button.text

        style: ButtonStyle {
            background: Rectangle {
                implicitWidth: parent.width;  // 70
                implicitHeight: parent.height;// 40
                border.width: control.pressed ? 2 : 1;
                //border.color: (control.hovered || control.pressed)
                //                ? "green" : "#888888";
                border.color: "transparent"
                radius: 5;
                color: (control.hovered || control.pressed)
                       ? "#0078D7" : "transparent";
            }
            label:
                Text{
                    text:myBtn.text;
                    clip:true;
                    anchors.fill: parent
                    color:"white"
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    font.pointSize: 12
                }
        }
        onClicked: {
            myClicked()
        }
    }
}

再来：

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Dialogs 1.2

Window {
    id: window
    visible: true
    width: 800
    height: 600
    minimumWidth: 480
    minimumHeight: 380
    title: qsTr("图片浏览器")

    // 定义缩放比例系数变量,范围在(-10,10)之间
    property double scaleValue: 1.1
    property int scaleLevel: 0
    property int imgWidth: 0
    property int imgHeight: 0

    // 背景颜色
    Rectangle{
        id:bgRect;
        color:"yellow";
        anchors.fill: parent;
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white"; }
            GradientStop { position: 0.2; color: "papayawhip"; }
            GradientStop { position: 0.5; color: "peachpuff"; }
            GradientStop { position: 0.8; color: "papayawhip"; }
            GradientStop { position: 1.0; color: "white"; }
        }
    }

    BusyIndicator {
        id: busy
        running: false
        anchors.centerIn: parent
        //z: 2
    }

    // 错误信息
    Text {
        id: stateLabel
        visible: false
        anchors.centerIn: parent
        //z: 3
    }

    Image {
        id: imageViewer
        asynchronous: true
        cache: false
        //anchors.fill: parent
        //anchors.centerIn: parent
        fillMode: Image.PreserveAspectFit
        //sourceSize.width: 10240
        //sourceSize.height: 10240
        onStatusChanged: {
            if (imageViewer.status === Image.Loading) {
                busy.running = true
                stateLabel.visible = false
            }

            // 如果后面手动更改width height，则重新加载图片无法获取到真实大小了
            else if(imageViewer.status === Image.Ready){
                busy.running = false;
                imgHeight = imageViewer.height;
                imgWidth = imageViewer.width;
                console.log("图片大小h/w="+imgHeight+"/"+imgWidth)
            }else if(imageViewer.status === Image.Error) {
                busy.running = false
                stateLabel.visible = true
                stateLabel.text = "Error"
            }
        }
    }
    function zoomIn(x,y){
        var beforeWidth  = imageViewer.width
        var beforeHeight = imageViewer.height

        imageViewer.width = imageViewer.width   * scaleValue
        imageViewer.height = imageViewer.height * scaleValue
        imageViewerMouseArea.width = imageViewer.width
        imageViewerMouseArea.height = imageViewer.height

        imageViewer.x = imageViewer.x + x - imageViewer.width  * x / beforeWidth
        imageViewer.y = imageViewer.y + y - imageViewer.height * y / beforeHeight
        scaleLevel++
    }

    function zoomOut(x,y){
        var beforeWidth  = imageViewer.width
        var beforeHeight = imageViewer.height

        imageViewer.width = imageViewer.width   / scaleValue
        imageViewer.height = imageViewer.height / scaleValue
        imageViewerMouseArea.width = imageViewer.width
        imageViewerMouseArea.height = imageViewer.height
        imageViewer.x = imageViewer.x + x - imageViewer.width  * x / beforeWidth
        imageViewer.y = imageViewer.y + y - imageViewer.height * y / beforeHeight
        scaleLevel--
    }

    function zoomToFit(){
        imageViewer.width = imgWidth;
        imageViewer.height = imgHeight;

        var height = Math.min(window.height,imageViewer.height);
        var width = Math.min(window.width,imageViewer.width);

        imageViewer.height = height;
        imageViewer.width = width;
        if(height > window.height){
            imageViewer.height = window.height;
        }
        if(width > window.width)
            imageViewer.width = window.width;
        imageViewer.x = (window.width-imageViewer.width)/2;
        imageViewer.y = (window.height-imageViewer.height)/2;

        imageViewerMouseArea.width = imageViewer.width
        imageViewerMouseArea.height = imageViewer.height
        scaleLevel = Math.abs((imageViewer.width-imgWidth)/imgWidth)*10;
        var hScale = Math.abs((imageViewer.height-imgHeight)/imgHeight)*10;
        scaleLevel = Math.min(scaleLevel,hScale)*-1;
    }

    MouseArea{
        id: imageViewerMouseArea
        anchors.fill: imageViewer

        // 设置拖拽对象以及拖拽区域,横向纵向拖动
        drag.target: imageViewer
        drag.axis: Drag.XAndYAxis
        //drag.minimumX: -imageViewer.width/2;
        //drag.maximumX: imageViewer.width/2;
        //drag.minimumY: - imageViewer.height/2;
        //drag.maximumY: imageViewer.height/2;

        // 设置鼠标悬停以及鼠标响应
        hoverEnabled: true
        onWheel: {
            // 按中心缩放
            // 在每次的基础上增加10%
            /*var scaleBefore = imageViewer.scale;
            var scaleDelta = imageViewer.scale * wheel.angleDelta.y / 120 / 10;

            // delta = 0.01左右(10%) scale后这里xy不会变
            //console.log("scale x/y="+imageViewer.x+imageViewer.y+"delta:"+scaleDelta)
            imageViewer.scale += scaleDelta;*/


            // 按鼠标缩放
            if(wheel.angleDelta.y>0 && scaleLevel<=10){        // 图像放大处理
                imageViewer.transformOriginPoint.x = wheel.x
                imageViewer.transformOriginPoint.y = wheel.y
                zoomIn(wheel.x,wheel.y)
             }
             else if(wheel.angleDelta.y< 0&& scaleLevel>=-10){ // 图像缩小处理
                imageViewer.transformOriginPoint.x = wheel.x
                imageViewer.transformOriginPoint.y = wheel.y
                zoomOut(wheel.x,wheel.y)
             }
        }

        onPressed: {
            cursorShape = Qt.ClosedHandCursor
        }
        onReleased: {
            cursorShape = Qt.ArrowCursor
        }
    }

    // 底部方框，用来放按钮
    Rectangle{
        id:toolBar
        height:50;
        width:parent.width*0.8;
        color: "#A04682B4";
        radius: 5;
        property int leftPos: (parent.width-width)/2;

        anchors.left: parent.left;
        anchors.leftMargin: leftPos;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 25;

        // 打开btn
        Mybutton {
            id: openFileBtn
            text: "打开"
            anchors.left: parent.left

            //按下按钮，打开文件对话框
            onMyClicked: {
                fileDialog.open()
            }
            //z: 4
        }

        // 旋转btn
        Mybutton {
            id: roteteBtnL
            text: "左旋转"
            anchors.left: openFileBtn.right

            onMyClicked: {
                if(imageViewer.status != imageViewer.Null)
                    imageViewer.rotation += 90;
            }
            //z: 4
        }
        Mybutton {
            id: roteteBtnR
            text: "右旋转"
            anchors.left: roteteBtnL.right

            onMyClicked: {
                if(imageViewer.status != imageViewer.Null)
                    imageViewer.rotation -= 90;
            }
            //z: 4
        }

        // 放大btn
        Mybutton {
            id: zoomInBtn
            text: "放大"
            anchors.left: roteteBtnR.right

            onMyClicked: {
                //imageViewer.scale += imageViewer.scale * 0.1;
                zoomIn(imageViewer.width/2,imageViewer.height/2)
            }
        }
        Mybutton {
            id: zoomOutBtn
            text: "缩小"
            anchors.left: zoomInBtn.right

            onMyClicked: {
                //imageViewer.scale -= imageViewer.scale * 0.1;
                zoomOut(imageViewer.width/2,imageViewer.height/2)
            }
        }
        Mybutton {
            id: seeAllBtn
            text: "看全部"
            anchors.left: zoomOutBtn.right

            onMyClicked: {
                //imageViewer.scale = 1.0;

                // 先恢复大小
                zoomToFit();
            }
        }
        Mybutton {
            id: actualSizeBtn
            text: "实际大小"
            anchors.left: seeAllBtn.right

            onMyClicked: {
                //imageViewer.scale = 1.0;
                imageViewer.x = 0;
                imageViewer.y = 0;
                imageViewer.width = imgWidth;
                imageViewer.height = imgHeight;
                scaleLevel = 0;
            }
        }
    }


    // 右边的文字
    Text {
        id: imageText
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.rightMargin: 8
        font.pixelSize: 15
    }

    FileDialog {
        id: fileDialog
        title: "选择一个图片"
        nameFilters: ["Image Files (*.jpg *.png *.gif)"]
        onAccepted: {
            // new String
            imageViewer.source = fileDialog.fileUrl
            var imageFile = fileDialog.fileUrl
            imageText.text = imageFile
        }
    }
}

整个下载：