使用QML中的Canvas实现电子罗盘绘制，效果图如下
一个简单的电子罗盘，红色N极。其中中间飞机表示当前的指向，
还是比较简单的，直接上代码吧
/*
作者：张建伟
时间：2018年4月27日
简述：电子罗盘界面实现
*/
importQtQuick2.0
Rectangle
{id:root
width:200
height:200
anchors.centerIn:parent
color:"transparent"
propertyintm_Angle:0
Rectangle
{width:parent.width
height:parent.height
color:"transparent"
rotation:root.m_Angle
Canvas
{anchors.fill:parent
onPaint:
{varctx=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(vari=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"
}
}
}
}