QML Canvas Context2D如何使用多路径？无Path2D对象的替代方案

问题描述 #

能否像HTML5 Canvas那样在QML Canvas的Context2D中使用多路径？Qt/QML没有Path2D对象，需要根据点列表绘制多边形，同时在每个顶点绘制椭圆，但使用同一路径时会出现路径错乱（表现为多边形边与椭圆之间出现多余连线）。已知可以通过两次遍历点列表实现，但Canvas性能已经较慢，点列表可达数百个点，希望找到无需两次遍历的方法。

问题原因 #

原代码中，绘制完多边形的线段后直接调用ellipse()，此时Canvas的当前路径终点停留在多边形顶点上，ellipse()会自动将当前路径终点与椭圆路径的起点连接，导致出现多余的连线，造成路径错乱。

解决方案 #

在每次绘制椭圆前，调用moveTo()将当前路径的终点移动到椭圆路径上的任意一点（比如椭圆的右侧顶点），这样椭圆路径会从该点开始绘制，不会与之前的多边形线段路径产生多余连接。整个过程只需一次遍历点列表，所有路径都在同一个beginPath()和stroke()中完成，避免多次路径调用带来的性能损耗。

修改后的代码 #

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Window

ApplicationWindow {
    id: main
    title: qsTr("Hello World")
    width: 800
    height: 800
    visible: true

    Canvas {
        id: poligono
        width: parent.width
        height: parent.height
        onPaint: {
            var points = backend.points();
            var limits = backend.limits();
            var ctx = getContext("2d");
            
            // ctx.lineWidth = 1;
            ctx.transform(1, 0, 0, -1, limits[0]+8, limits[1]+8);

            ctx.beginPath();
            for (let i = 0; i < points.length; i++) {
                if (i == 0) {
                    ctx.moveTo(points[i][0], points[i][1]);
                } else {
                    ctx.lineTo(points[i][0], points[i][1]);
                }
                
                // 移动到椭圆右侧顶点，避免与多边形线段连接
                ctx.moveTo(points[i][0] + 5, points[i][1]);
                // 绘制顶点椭圆
                ctx.ellipse(points[i][0], points[i][1], 5, 5);
            }

            ctx.closePath()
            ctx.stroke()
        }
    }
}

补充说明 #

• 此方法通过一次遍历完成所有路径构建，仅调用一次stroke()，最大化利用Canvas的绘制性能。
• 如果需要为椭圆和多边形设置不同的样式（如不同颜色、线宽），则需要拆分路径并分别绘制，但仍可通过一次遍历完成：先构建多边形路径并绘制，再在同一循环中构建椭圆路径并绘制，无需重复遍历点列表。

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