Qt-QML-Canvas-雷达扫描仪表简单
使用QML实现的雷达仪表的实现，主要实现了余晖扫描的实现，其他的还是比较简单的，后面可能会加入目标标识，目前的功能仅仅是一个假的扫描雷达
来看代码
/*
作者：张建伟
时间：2018年4月27日
简述：雷达仪表实现
*/
importQtQuick2.0
Rectangle
{
id:root
width:200
height:200
propertyintm_Angle:0
Timer
{
interval:25;running:true;repeat:true
onTriggered:
{
root.m_Angle=root.m_Angle+1;
if(root.m_Angle==360)
{
root.m_Angle=0;
}
}
}
color:"transparent"
anchors.centerIn:parent
Rectangle
{
anchors.fill:parent
color:"transparent"
Canvas
{
anchors.fill:parent
onPaint:
{
varctx=getContext("2d");
ctx.lineWidth=2;
ctx.strokeStyle="#00FF00";
ctx.fillStyle="#00FF00";
ctx.globalAlpha=1.0;
ctx.beginPath();
ctx.arc(width/2,width/2,2,0,2*Math.PI);
ctx.stroke();
ctx.fill()
ctx.restore();
ctx.beginPath();
ctx.arc(width/2,width/2,width/2-80,0,2*Math.PI);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.arc(width/2,width/2,width/2-60,0,2*Math.PI);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.arc(width/2,width/2,width/2-40,0,2*Math.PI);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.arc(width/2,width/2,width/2-20,0,2*Math.PI);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.arc(width/2,width/2,width/2-1,0,2*Math.PI);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.lineTo(0,width/2)
ctx.lineTo(width,width/2)
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.lineTo(width/2,0)
ctx.lineTo(width/2,width)
ctx.stroke();
ctx.restore();
}
}
Canvas{
anchors.fill:parent
rotation:-root.m_Angle
onPaint:
{
varctx=getContext("2d");
ctx.lineWidth=2;
varsectorCnt=30;
varstartDeg=90,endDeg;
varsectorRadius=width/2
ctx.translate(sectorRadius,sectorRadius);
ctx.fillStyle='rgba(0,255,0,0.05)';
for(vari=0;i<sectorCnt;i++)
{
endDeg=startDeg+60-60/sectorCnt*i;
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-sectorRadius);
ctx.arc(0,0,sectorRadius,Math.PI/180*(startDeg),Math.PI/180*endDeg);
ctx.closePath();
ctx.fill();
}
//ctx.restore();
}
}
}
}
