欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

QML中用鼠标旋转Rectangle

程序员文章站 2022-03-09 13:33:55
...

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

点击打开链接

                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//此属性用于指定在旋转的时候是以哪一点进行旋转
            }
        }
    }

}

运行效果如下:

QML中用鼠标旋转Rectangle

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

相关标签: QML