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-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 lineWidth

1 个答案: