QML context2d lineWidth

Question

我试图在qml画布上画一个线圈，但是当我将lineWidth更改为1以外的东西时，它会把笔画的位置弄乱，从而把它们延伸到中间。

left:lineWidth=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 5-画布相同)。所有这将做的是告诉画布连接第一点和最后一点。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();
}