2

所以我试图根据从数据库中提取的数字动态创建形状。我尝试了最合乎逻辑的方法，将 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 循环中，我已经尝试了所有方法。我肯定错过了一些东西。

我对该主题进行了一些搜索，发现一条与我正在尝试做的事情相关的评论：

基本上，您需要保留一个形状对象数组，并在添加新形状时将新对象推送到数组上。在 kin 对象的 setDrawStage() 方法中，只需循环遍历数组并绘制每个对象。我会在实验室发布后通知您。

我已经到处寻找 setDrawStage() 方法，但找不到太多与之相关的数据。他还表示将 for 循环放在方法中，这有点令人困惑，因为我不仅想绘制形状，而且还想将它存储在一个图层中（就像我对其他所有形状所做的那样）。

有人可能有解决方案吗？非常感谢先进。

4

2 回答 2

1

我认为您遇到了 JavaScript 闭包问题。更多关于：

JavaScript 闭包是如何工作的？

尝试将 for 循环内的所有逻辑移动到一个函数中以引入作用域。另外，为什么不使用 Kinetic.Shape，而不是使用 Kinetic.Circle？

于 2012-11-03T07:00:46.450 回答
0

据我所知，您脚本中的 X 和 Y 没有变化，所以您的形状总是从同一个位置开始？

于 2013-04-30T14:14:49.093 回答