QML context2d lineWidth

Question

Я пытаюсь сделать круг линий в холсте qml, но когда я изменяю lineWidth на что-то, отличное от 1, он испортил положение штрихов, чтобы они были расширены в центр ,

слева LineWidth = 1, справа: LineWidth = 2

screenshot

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