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

【问题标题】：Drawing circle and 3 lines connecting the circle using canvas in QML在 QML 中使用画布绘制圆和连接圆的 3 条线
【发布时间】：2021-04-13 20:55:45
【问题描述】：

我正在尝试理解 QML Canvas

我想画一个带有径向渐变的圆和从圆外一点连接圆的 3 条线。

这是预期的：

代码如下：

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

        }
    }
}

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

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

谢谢。

【问题讨论】：

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

标签： qt canvas qml

【解决方案1】：

在绘制弧线之前，您错过了对 beginPath() 的调用。这导致弧线成为在后续调用 onPaint 时从第一个 onPaint 开始的路径的一部分。

所以，只需在ctx.arc(...)上方添加：

ctx.beginPath()

【讨论】：