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循环中。我肯定错过了什么。

我已经对这个主题进行了一些搜索，我找到了一条与我正在尝试做的相关的评论：

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

我看了一遍setDrawStage（）方法，但找不到与之关联的数据。他还说过将for循环放在方法中，这有点令人困惑，因为我不仅想绘制形状而且还将它存储在一个层中（就像我为其他每个形状所做的那样）。

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

Answer 1

我认为你有一个JavaScript闭包问题。更多内容：

How do JavaScript closures work?

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

Answer 2

你的脚本中的X和Y不会改变，因为你的形状总是从同一个位置开始？

KineticJS - 动态创建形状

2 个答案: