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();

}

}

}

}