Question

好的，我已经得到了这段代码，试图创建一个支离破碎的＆＃34;甜甜圈＆＃34;画布形状：

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，它可以工作，并正确绘制它。这可能是什么问题？

Answer 1

当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/

画布arc（）不接受变量？

1 个答案: