Qt 在QML中使用画布绘制圆和连接圆的3条线

我正在努力理解QML画布

我想画一个带径向梯度的圆，从圆外的一点开始画三条线连接圆

以下是我们所期望的：

代码如下：

Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Hello World")
color: "black"


Rectangle {
    color: "black"
    anchors.fill: parent
    Canvas {
        id: canvas
        anchors.fill: parent
        width: parent.width
        height: parent/1.3
        opacity: 0.5
        onPaint: {
            var ctx = getContext('2d');
            var offset = canvas.height/3
            var x = canvas.height/2 + offset,
            y = canvas.height/2,
            // Radii of the white glow.
            innerRadius = 5,
            outerRadius = y-10,
            // Radius of the entire circle.
            radius = canvas.height/2;
            //Draw the circle with gradient
            var gradient = ctx.createRadialGradient((x+(x*0.25)), (y+(y*0.25)), innerRadius, x, y, outerRadius);
            gradient.addColorStop(0, '#232323');
            gradient.addColorStop(1, '#6E6E6E');
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fillStyle = gradient;
            ctx.fill();

            ctx.lineWidth = 1
            ctx.strokeStyle = "grey"
            ctx.beginPath()
            //Straight line
            ctx.moveTo(0, y)
            ctx.lineTo(offset, y)
            //Down tangent line
            ctx.moveTo(0, y+30)
            ctx.lineTo(x/1.25, (2*y)-5)
            //Up tangent line
            ctx.moveTo(0, y-30)
            ctx.lineTo(x/1.25, 5)
            ctx.stroke()

        }
    }
}

但问题是，一旦我调整窗口大小，画布就会扭曲，我会得到以下结果：

当我调整窗口大小时，我无法弄清楚发生了什么。 任何帮助都将不胜感激

---

谢谢。

在绘制圆弧之前，缺少对beginPath（）的调用。这将导致圆弧成为后续调用onPaint时在第一个onPaint上启动的路径的一部分

所以，只需在ctx.arc（…）的正上方添加：

---

在绘制弧之前，缺少对beginPath（）的调用。这将导致圆弧成为后续调用onPaint时在第一个onPaint上启动的路径的一部分

所以，只需在ctx.arc（…）的正上方添加：

---

您是否尝试过调整renderTarget和renderStrategy属性并获得不同的结果？是否尝试过调整renderTarget和renderStrategy属性并获得不同的结果？

ctx.beginPath()