QML context2d lineWidth
I am trying to make a circle of lines in qml canvas, but when I change lineWidth to something other than 1, it puts the position of the strokes so that they are expanded to the center.
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();
}
}
Can anyone help me?
+3
source to share
1 answer
No need to use closePath()
(assuming it works the same as it does with html5-canvas). All this will mean that the canvas connects the first point to the last point. moveTo()
will create the required subitem.
In addition, the calculations must be adjusted to use the inner and outer radius relative to the center:
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();
}
+1
source to share