dynamic - KineticJS - 形状を動的に作成する

Question

そのため、データベースから取得した数値に基づいて形状を動的に作成しようとしています。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();
    }

形状を配列に入れることから、新しい形状を作成して for ループ内に追加することまで、あらゆることを試しました。私は間違いなく何かが欠けています。

このトピックについて少し検索したところ、私がやろうとしていることに関連するコメントが1つ見つかりました。

基本的に、形状オブジェクトの配列を保持し、新しい形状を追加するときに新しいオブジェクトを配列にプッシュする必要があります。kin オブジェクトの setDrawStage() メソッド内で、配列をループして各オブジェクトを描画します。ラボが公開されたらお知らせします。

setDrawStage() メソッドを探しましたが、それに関連するデータがあまり見つかりません。彼はまた、for ループをメソッド内に配置すると述べましたが、これは形状を描画するだけでなく、それをレイヤーに格納したいため (他のすべての形状で行ったように)、少し混乱します。

誰かがおそらく解決策を持っていますか? 高度に高く評価されています。