Canvas arc（）不接受變量？

好吧，我有這一段代碼，試圖創造在畫布上支離破碎的「甜甜圈」形：Canvas arc（）不接受變量？

for (var i = 0; i < numberOfItems; i++) { 
    var endingAngle = (startingAngle + itemLength) % (2 * Math.PI); 

    menuItem[i] = new Kinetic.Shape({ 
     sceneFunc: function (context) { 
      context.beginPath(); 
      context.arc(containerCenter, containerCenter, circleRadius, startingAngle, endingAngle, false); 
      context.lineTo(containerCenter + smallCircleRadius * Math.cos(endingAngle), containerCenter + smallCircleRadius * Math.sin(endingAngle)); 
      context.arc(containerCenter, containerCenter, smallCircleRadius, endingAngle, startingAngle, true); 
      context.lineTo(containerCenter + circleRadius * Math.cos(startingAngle), containerCenter + circleRadius * Math.sin(startingAngle)); 
      context.closePath(); 

      context.fillStrokeShape(this); 
     }, 
     fill: '#00ff00', 
     stroke: 'black', 
     strokeWidth: 1 
    }); 

    layer.add(menuItem[i]); 
    startingAngle = endingAngle; 
}

startingAngle從該片斷的外部設定和基本無關（可爲任意值），numberOfItems是段的數量，itemLength每個片段的長度以圓周的百分比表示，circleRadius和smallCircleRadius分別表示圓環形狀的外圈和內圈的半徑。

現在，當我嘗試按原樣輸入時，它不會在畫布上繪製任何東西，只是一條線，它似乎是第一個片段的左側線或右側線最後一個片段 - 儘管這是不相關的。如果我將代碼更改爲常量值而不是startingAngle和endingAngle，它將起作用，並將其正確繪製。這裏可能是什麼問題？

來源

2014-04-09 user3515633

當Kinetic.Shape試圖繪製自己時，您的startingAngle和endingAngle變量不再存在。

當for循環結束時，那些角度變量將從範圍中消失。

要使角度可供sceneFunc您可以添加的角度特性的.Shape本身：

menuItem[i].startingAngle=startingAngle; 
menuItem[i].endingAngle=endingAngle;

然後你可以檢索你的sceneFunc角度：

sceneFunc: function(ctx) { 
    var startingAngle=this.startingAngle; 
    var endingAngle=this.endingAngle 
    ...

演示：http://jsfiddle.net/m1erickson/465qY/

來源

2014-04-09 18:29:57 markE

祝福你，我會永遠卡在這裏。 – user3515633

Canvas arc（）不接受變量？

回答

相關問題