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

代码