QML中用鼠标旋转Rectangle

首先感谢一下博主的源码：

点击打开链接

                QML 旋转Rectangle

需求：

在rectangle下的四个角上画圆，然后在圆中进行鼠标事件，按住转动鼠标，rectangle随之转动

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true
    width: 500
    height: 500

    Rectangle{
        id:colorChange
        color: "red"
        x:100;
        y:100;
        width: 100
        height: 100

        Image{
            id:image;
            anchors.fill: parent;
            source: "qrc:/images/bg.png";

        }

    }

    Item {
        id: m
        //获得焦点中心和鼠标坐标连线，与y轴正半轴之间的夹角
        function getAngleTopLeft(px,py,mx,my){
            var x = Math.abs(px-mx);
            var y = Math.abs(py-my);
            var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
            var cos = y/z;
            var radina = Math.acos(cos);//用反三角函数求弧度
            var angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度

            if(mx>=px && my>px){ //在第一象限
                angle = 90-angle;
            }
            if(mx<px && my>=px){ //在第二象限
                angle = 90+angle;
            }
            if(mx<=px && my < py){ //第三象限
                angle = 270-angle;
            }
            if(mx>px &&my<=py){ //在第四象限
                angle = 270 +angle;
            }

            return angle;
        }

        function getAngleTopRight(px,py,mx,my){
            var x = Math.abs(px-mx);
            var y = Math.abs(py-my);
            var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
            var cos = y/z;
            var radina = Math.acos(cos);//用反三角函数求弧度
            var angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度

            console.log("调整前角度："+ angle);

            if(mx>=px && my>px){ //在第一象限
                console.log("----1-----")
                angle = 270-angle;
            }
            if(mx<px && my>=px){ //在第二象限
                console.log("----2-----")
                angle = 270+angle;
            }
            if(mx<=px && my < py){ //第三象限
                console.log("----3-----")
                angle = 90-angle;
            }
            if(mx>px &&my<=py){ //在第四象限
                console.log("----4-----")
                angle = 90 +angle;
            }
            return angle;
        }

        function getAngleBottomLeft(px,py,mx,my){
            var x = Math.abs(px-mx);
            var y = Math.abs(py-my);
            var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
            var cos = y/z;
            var radina = Math.acos(cos);//用反三角函数求弧度
            var angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度

            if(mx>=px && my>px){ //在第一象限
                angle = 90-angle;
            }
            if(mx<px && my>=px){ //在第二象限
                angle = 90+angle;
            }
            if(mx<=px && my < py){ //第三象限
                angle = 270-angle;
            }
            if(mx>px &&my<=py){ //在第四象限
                angle = 270 +angle;
            }
            if(mx>px && my===py){   //在X轴正方向
                angle = 0;
            }

            return angle;
        }

        function getAngleBottomRight(px,py,mx,my){
            var x = Math.abs(px-mx);
            var y = Math.abs(py-my);
            var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
            var cos = y/z;
            var radina = Math.acos(cos);//用反三角函数求弧度
            var angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度

            if(mx>=px && my>px){ //在第一象限
                angle = 270-angle;
            }
            if(mx<px && my>=px){ //在第二象限
                angle = 270+angle;
            }
            if(mx<=px && my < py){ //第三象限
                angle = 90-angle;
            }
            if(mx>px &&my<=py){ //在第四象限
                console.log("----4-----")
                angle = 90 +angle;
            }
            return angle;
        }

    }

    Rectangle{
        id:topLeftCircular
        x:50
        y:50
        width: 100;
        height: 100;
        radius:50;
        opacity: 0.5;
        border.color: "white";
        color: "lightblue";
        MouseArea{
            anchors.fill: parent

            onPressed: {
                colorChange.transformOrigin=Item.TopLeft//此属性用于指定在旋转的时候是以哪一点进行旋转

            }

            onPositionChanged:{
                var sca = m.getAngleTopLeft(50,50,mouseX,mouseY);
                colorChange.rotation = sca;
            }
        }
    }

    Rectangle{
        id:topRightCircular
        x:150
        y:50
        width: 100;
        height: 100;
        radius:50;
        opacity: 0.5;
        border.color: "white";
        color: "lightblue";
        MouseArea{
            anchors.fill: parent

            onPressed: {
                colorChange.transformOrigin=Item.TopRight//此属性用于指定在旋转的时候是以哪一点进行旋转
            }

            onPositionChanged:{
                var sca = m.getAngleTopRight(50,50,mouseX,mouseY);
                console.log("-----" + sca);

                colorChange.rotation = sca;
            }
//            onClicked: {
//               console.debug(mouseX,mouseY);
//            }
        }
    }

    Rectangle{
        id:bottomLeftCircular
        x:50
        y:150
        width: 100;
        height: 100;
        radius:50;
        opacity: 0.5;
        border.color: "white";
        color: "lightblue";
        MouseArea{
            anchors.fill: parent

            onPositionChanged:{
                var sca = m.getAngleBottomLeft(50,50,mouseX,mouseY);

                colorChange.rotation = sca;
            }

            onPressed: {
                colorChange.transformOrigin=Item.BottomLeft//此属性用于指定在旋转的时候是以哪一点进行旋转
            }
        }
    }

    Rectangle{
        id:bottomRightCircular
        x:150
        y:150
        width: 100;
        height: 100;
        radius:50;
        opacity: 0.5;
        border.color: "white";
        color: "lightblue";
        MouseArea{
            anchors.fill: parent

            onPositionChanged:{
                var sca = m.getAngleBottomRight(50,50,mouseX,mouseY);
                console.log("调整后:"+ sca);
                colorChange.rotation = sca;
            }

            onPressed: {
                colorChange.transformOrigin=Item.BottomRight//此属性用于指定在旋转的时候是以哪一点进行旋转
            }
        }
    }

}

运行效果如下：

主要的计算角度已经博主已经计算了，我只是根据项目需求进行修改