キャンバスペインティングは右中央から上中央に向かって開始されます

Question

私は円/円が黄色の塗料を "+"ボタンのpress（）で得るはずのqml (my program outputでプログラムを書いています。実際に私のコードは動作しますが、ここでの問題は、右中央からペイントキャンバスを開始することです。キャンバスペインティングの出発点としてトップセンターが欲しい。

私に何か提案してもらえますか？それは始点のいくつかの数学的計算についてのすべてですが、それは私にクリックされていません。

object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise) 

あなたstartAngleは円があなたが「右呼んで始まる描かれているので、0：

click here to see the current code output and my expectation

# import QtQuick 2.0 
# import QtQuick.Window 2.0 
Rectangle 
{ 
    id:main 
    width: 400 
    height: 400 
    property real counter: 0.0 

    property int count: 1 

    property real angle : 0; 
    property int value: 0 
    property int maxHours: 0 

    onValueChanged: 
    { 
     console.log("======> canvas.maxHours = ",maxHours); 
     if(maxHours < 4) 
     { 
      if(360 === (angle += 6)) 
      { 
       angle = 0;//-1.5; 
       if(360 === (hoursAngle += 90)) 
       { 
        // 0.00001 is needed to correct working ctx.arc(...) formulas on corner cases 
        angle = hoursAngle -= 0.0001 
       } 
       maxHours++; 
      } 
      canvas.requestPaint(); 
     } 

    } 

    Canvas 
    { 
     id: canvas 

     anchors.centerIn: main 

     width: 170 
     height: 170 
     smooth: true 
     visible: true 
     renderStrategy: Canvas.Threaded; 
     renderTarget: Canvas.Image; 
     antialiasing: true; 

     onPaint: 
     { 
      var ctx = getContext("2d"); 
      ctx.reset() 

      var centreX = width/2; 
      var centreY = height/2; 


      //M Indicator 
      ctx.beginPath(); 
      ctx.fillStyle = Qt.rgba(0,0,0,0.3); 
      ctx.moveTo(centreX, centreY); 
      ctx.arc(centreX, centreY, width/2 - 5, 0, 360, false); // Outer circle 
      ctx.arc(centreX, centreY, width/2 - 10, 0, 360, true); // Inner circle 
      ctx.closePath(); 
      ctx.fill(); 


      ctx.beginPath(); 
      ctx.fillStyle = "yellow" 
      ctx.moveTo(centreX, centreY); 
      console.log("===> Ravi centreX =",centreX) 
      console.log("===> Ravi centreY =",centreY) 
      console.log("===> Ravi angle =",angle) 
      console.log("===> Ravi angle * Math.PI/180 =",angle * Math.PI/180) 


      ctx.arc(centreX, centreY, width/2 - 5, 0, angle * Math.PI/180, false); // Outer circle 
      ctx.arc(centreX, centreY, width/2 - 10, angle * Math.PI/180, 0, true); // Inner circle 

      ctx.closePath(); 
      ctx.fill(); 

     } 
    } 

    Rectangle 
    { 
     id:addElement 
     width:35 
     height:35 
     anchors.right: parent.right 
     anchors.top: parent.top 
     Text 
     { 
      text: "+" 
      font.pixelSize: 50 
      anchors.centerIn: addElement 
     } 
     MouseArea 
     { 
      anchors.fill: addElement 
      onClicked: 
      { 
       value++; 

      } 
     } 
    } 
} 

Answer 1

あなたは（see the documentation）以下のように定義arc方法を使用しています中心 "：角度は三角の円に従って定義される。あなたが、あなたのサークルが「トップセンター」から引き出されているしたい場合は、単に設定あなたstartAngleあなたを与える

Math.PI/2へ：

property real angle : -90; 
... 
ctx.arc(centreX, centreY, width/2 - 5, -Math.PI/2, angle * Math.PI/180, false); // Outer circle 
ctx.arc(centreX, centreY, width/2 - 10, angle * Math.PI/180, -Math.PI/2, true); // Inner circle