Qt-QML-电子罗盘

使用QML中的Canvas实现电子罗盘绘制，效果图如下

 

一个简单的电子罗盘，红色N极。其中中间飞机表示当前的指向，

还是比较简单的，直接上代码吧

 

/*

  作者：张建伟

  时间：2018年4月27日

  简述：电子罗盘界面实现

  */

import QtQuick 2.0

Rectangle

{

    id:root

    width: 200

    height: 200

    anchors.centerIn: parent

    color: "transparent"

    property int m_Angle: 0

    Rectangle

    {

        width: parent.width

        height: parent.height

        color: "transparent"

        rotation: root.m_Angle

        Canvas

        {

            anchors.fill: parent

            onPaint:

            {

                var ctx = getContext("2d");

                //绘制圆圈

                ctx.lineWidth = 2;

                ctx.strokeStyle = "#FFFFFF";

                ctx.globalAlpha = 1.0;

                ctx.beginPath();

                ctx.arc(width/2,width/2,width/2-2,0,2*Math.PI);

                ctx.stroke();

                ctx.restore();

                for(var i = 0;i<36;i++)

                {

                    ctx.save();

                    ctx.translate(width/2,height/2);

                    ctx.rotate(i*10*Math.PI/180);

                    ctx.beginPath();

                    if(i%9 ==0)

                    {

                        ctx.moveTo(0,-width/2+12);

                        ctx.lineTo(0,-width/2+2);

                    }

                    else

                    {

                        ctx.moveTo(0,-width/2+10);

                        ctx.lineTo(0,-width/2+2);

                    }

                    ctx.stroke();

                    ctx.restore();

                }

            }

        }

        Rectangle

        {

            width: 20

            height: 20

            anchors.horizontalCenter: parent.horizontalCenter

            anchors.top: parent.top

            anchors.topMargin: 12

            rotation: -parent.rotation

            color: "#00000000"

            Text {

                anchors.centerIn: parent

                font.family: "微软雅黑"

                font.pixelSize: 14

                color: "#FF0000"

                text: qsTr("N")

            }

        }

        Rectangle

        {

            width: 20

            height: 20

            anchors.verticalCenter: parent.verticalCenter

            anchors.right: parent.right

            anchors.rightMargin: 12

            color: "#00000000"

            rotation: -parent.rotation

            Text {

                anchors.centerIn: parent

                font.family: "微软雅黑"

                font.pixelSize: 14

                color: "#FFFFFF"

                text: qsTr("E")

            }

        }

        Rectangle

        {

            width: 20

            height: 20

            anchors.verticalCenter: parent.verticalCenter

            anchors.left: parent.left

            anchors.leftMargin: 12

            color: "#00000000"

            rotation: -parent.rotation

            Text {

                anchors.centerIn: parent

                font.family: "微软雅黑"

                font.pixelSize: 14

                color: "#FFFFFF"

                text: qsTr("W")

            }

        }

        Rectangle

        {

            width: 20

            height: 20

            anchors.horizontalCenter: parent.horizontalCenter

            anchors.bottom: parent.bottom

            anchors.bottomMargin: 12

            color: "#00000000"

            rotation: -parent.rotation

            Text {

                anchors.centerIn: parent

                font.family: "微软雅黑"

                font.pixelSize: 14

                color: "#FFFFFF"

                text: qsTr("S")

            }

        }

        Rectangle

        {

            width: 50

            height: 50

            color: "transparent"

            rotation: -parent.rotation

            anchors.centerIn: parent

            Image {

                anchors.fill: parent

                source: "file:Images/Su_33_Pointer.png"

            }

        }

    }

}