效果
知识点
- 绘图,使用Canvas进行绘图
- 图层叠加,小车运动和路径的绘制为两个图层,所以两者互不干扰
- 画布旋转,小车转向并非是将图标进行旋转而是将画布进行旋转
- 绘制图片,初始点标定是将图标绘制在图层上
- 绘制路径,将小车每次移动的轨迹用线段连接
源码
绘制小车
/*********************实时刷新小车位置图层************************/
Canvas{
id: carCanvas
anchors.fill: parent
z: 2
onPaint: {
var flushCarCtx = getContext("2d")
if(isInitPointClicked)
{
drawPoint(flushCarCtx)
}
}
/*********************画小车初始位置点************************/
function drawPoint(flushCarCtx)
{
flushCarCtx.save()
flushCarCtx.reset()
flushCarCtx.translate(carCurrentX, carCurrentY)
if(isUp)
{
flushCarCtx.rotate(-Math.PI/2)
}
else if(isDown)
{
flushCarCtx.rotate(Math.PI/2)
}
else if(isLeft)
{
flushCarCtx.rotate(Math.PI)
}
flushCarCtx.drawImage(imgCar, -imgCar.width/2, -imgCar.height/2)
flushCarCtx.restore()
}
}
绘制路径
/*********************用于画小车轨迹的图层************************/
Canvas{
id: mapCanvas
anchors.fill: parent
z: 1
onPaint: {
var ctx = getContext("2d")
drawLine(ctx)
}
/*********************画路径************************/
function drawLine(ctx)
{
ctx.beginPath()
ctx.lineWidth = 1
ctx.moveTo(carPreviousX, carPreviousY)
ctx.lineTo(carCurrentX, carCurrentY)
ctx.closePath()
ctx.stroke()
}
}
代码