QML Canvas Context2D 中的多个路径

Question

有没有办法在同一个画布上下文中使用多个路径，就像在HTML5 canvas中一样？ qt/qml 中没有 Path2D 对象。

我需要从点列表中绘制一个多边形，每个顶点应该有一个椭圆，当尝试使用相同的路径时，它会变得像这样混乱：

我知道我可以用 2 个 for 循环来做到这一点，但是画布已经有点慢了，而且每个路径都不同，它会更慢（点列表可以有数百个点），有没有其他方法可以做到这一点而不需要迭代两次通过点列表？

当前代码：

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.ellipse(points[i][0], points[i][1], 5, 5);
            }

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

Answer 1

您可以在单个循环中使用它，没有问题，它将作为闭合子路径添加到路径中，例如：

Canvas {
        id: mycanvas
        anchors.fill: parent
        property int count: 20
        property list<point> points: {
            var arr = [];
            for(var i = 0;i < mycanvas.count;i++)
            {
                var x = Math.floor(Math.random() * mycanvas.width);
                var y = Math.floor(Math.random() * mycanvas.height);
                arr.push(Qt.point(x,y));
            }

            return arr;
        }

        onPaint: {
            var ctx = getContext("2d");
            ctx.lineWidth = 1;
            ctx.lineJoin = "round";
            ctx.strokeStyle = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
            ctx.fillStyle = Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0);
            ctx.beginPath();
            ctx.moveTo(mycanvas.points[0].x, mycanvas.points[0].y);
            for(var i = 1;i < mycanvas.count;i++)
            {
                ctx.lineTo(mycanvas.points[i].x, mycanvas.points[i].y);
                ctx.ellipse(mycanvas.points[i].x - 10, mycanvas.points[i].y - 10, 20, 20);
                ctx.fill();
                ctx.moveTo(mycanvas.points[i].x, mycanvas.points[i].y);
            }
            ctx.stroke();
        }
    }