QML之控制小车运动并绘制路径

效果

知识点

• 绘图，使用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()    }}

代码