Dynamic KineticJS-动态创建形状

因此，我尝试根据从数据库中提取的数字动态创建形状。我尝试了最合乎逻辑的方法，围绕着创建一个形状来包装for循环，然后将该形状添加到一个层中。但是由于我不知道的原因，它不断地重新修改相同的形状，即使存储在层中的形状应该位于不同的位置（和不同的属性）

我的代码如下：

function graph(w) {
        barLayer.removeChildren();
        var bar = new Array();

        for (var i = 1; i <= array.length; i++) {
            var pos = i * Math.PI / 30;
            var scaleUp = (i / array.length) * 2.5;
            bar[i-1] = new Kinetic.Shape({
                drawFunc: function(context) {
                    context.beginPath();
                    context.moveTo(radius2, radius2);
                    context.arc(radius2, radius2, scaleUp * radius2, (- Math.PI / 2) - w + pos, (- Math.PI / 2) - w + (Math.PI / 30) + pos, false);
                    context.closePath();
                    this.stroke(context);
                    this.fill(context);
                },
                fill: "#333",
                stroke: "#000",
                strokeWidth: 4,
                x: centerX,
                y: centerY,
                offset: [200,200],
            });
            console.log("Starting: ", (- Math.PI / 2) - w + pos, "/ Ending: ",  (- Math.PI / 2) - w + (Math.PI / 30) + pos);
        }

        for (var n = 0; n < bar.length; n++) {
            barLayer.add(bar[n]);

        }
        barLayer.draw();
    }

函数图（w）{
barLayer.removeChildren（）；
var bar=新数组（）；
对于（var i=1；i我认为您遇到了JavaScript闭包问题。更多信息：


尝试将for循环中的所有逻辑移到一个函数中以归纳作用域。另外，与其使用Kinetic.Shape，为什么不使用Kinetic.Circle？
X和Y在脚本中不会发生变化，因此您的形状将始终从相同的位置开始？
谢谢！它现在运行良好，从未完全理解闭包的本质。无论如何，我使用形状而不是圆，因为我在圆内绘制条形图（使用半径作为高度），所以形状似乎是实现这一点的最明显的途径。嘿，如果您可以直接添加JSFIDLE或代码，那就太好了。我无法让它工作：/