QML Canvas往返绘制线条时两端出现多余线段的解决方法求助

• 重置路径状态：每次绘制新轨迹段前，调用ctx.reset()或ctx.beginPath()清空之前的路径上下文。往返绘制时，若路径未重置，Canvas会自动连接前后两次绘制的端点，形成多余线段。
• 精准定位路径起点：切换往返方向时，使用ctx.moveTo()直接定位到下一段轨迹的起始坐标，而非依赖Canvas自动连接上一段终点与新段起点。
• 检查坐标数组有效性：排查传入的坐标数组，确保没有冗余重复端点或错误坐标。如果往返轨迹的首尾坐标存在偏差，Canvas会自动补充连接线段。
• 调整线条端点属性：将lineCap设置为butt（默认值），避免round或square属性带来的端点视觉延伸；同时避免设置过大的lineWidth，减少宽线条端点的额外渲染。
• 分段独立绘制：将往返的两段轨迹作为独立路径处理，每段路径都单独调用beginPath()和stroke()，避免路径交叉污染。

示例修正代码 #

Canvas {
    width: 400
    height: 400
    onPaint: {
        const ctx = getContext("2d");
        ctx.lineWidth = 2;
        ctx.lineCap = "butt";

        // 正向轨迹绘制
        ctx.reset();
        ctx.beginPath();
        const forwardCoords = [[50,50], [200,50], [200,200]];
        ctx.moveTo(forwardCoords[0][0], forwardCoords[0][1]);
        forwardCoords.slice(1).forEach(coord => {
            ctx.lineTo(coord[0], coord[1]);
        });
        ctx.strokeStyle = "black";
        ctx.stroke();

        // 反向轨迹绘制，独立路径
        ctx.reset();
        ctx.beginPath();
        const backwardCoords = [[200,200], [200,50], [50,50]];
        ctx.moveTo(backwardCoords[0][0], backwardCoords[0][1]);
        backwardCoords.slice(1).forEach(coord => {
            ctx.lineTo(coord[0], coord[1]);
        });
        ctx.strokeStyle = "red";
        ctx.stroke();
    }
}

内容的提问来源于stack exchange，提问作者Leaf Cpp