QML context2d 线宽

Question

我试图在 qml 中画一圈线 canvas，但是当我将 lineWidth 更改为 1 以外的值时，它弄乱了笔画的位置，因此它们被延长了进入中心。

左:线宽=1 , right:lineWidth=2

Canvas {
    id:spinner
    anchors.centerIn: parent
    width:400
    height: 400
    onPaint: {
        var ctx = getContext("2d");
        var x,y,rotx,roty
        ctx.reset();
        ctx.beginPath();

        for (var i=0;i<10;i++){
            rotx = Math.cos(Math.PI*2*i/10)
            roty = Math.sin(Math.PI*2*i/10)
            x = 10*rotx + this.width/2
            y = 10*roty + this.height/2
            ctx.moveTo( x , y )
            x = (10 + 10)* rotx + this.width/2
            y = (10 + 10)* roty + this.height/2
            ctx.lineTo( x , y )
            ctx.closePath()
        }
        ctx.lineWidth = 1;
        ctx.lineCap = "round";
        ctx.stroke();
    }
}

有人可以帮助我吗？

Answer 1

不需要使用 closePath()（假设它的工作方式与 html5-canvas 相同）。所有这一切都会告诉 canvas 连接第一个点和最后一个点。 moveTo() 将创建必要的子路径。

此外，必须调整计算以使用相对于中心的内外半径：

onPaint: {
    var ctx = getContext("2d");
    var x,y,rotx,roty, cx, cy, innerRadius, outerRadius, angle;
    ctx.reset();
    ctx.beginPath();

    cx = this.width/2;
    cy = this.height/2;
    innerRadius = 10;
    outerRadius = 100;

    for (var i=0;i<10;i++){
        angle = Math.PI*2*i/10;
        x = cx + innerRadius * Math.cos(angle);
        y = cy + innerRadius * Math.sin(angle);
        ctx.moveTo( x , y )

        x = cx + outerRadius * Math.cos(angle);
        y = cy + outerRadius * Math.sin(angle);
        ctx.lineTo( x , y )
    }
    ctx.lineWidth = 1;
    ctx.lineCap = "round";
    ctx.stroke();
}

QML context2d 线宽

QML context2d lineWidth

javascript

qml

stroke