KineticJS - 动态创建形状

所以我试图根据从数据库中拉出的数字动态创建形状。我尝试了最合乎逻辑的方式来围绕创建一个形状并随后将该形状添加到一个图层中的for循环。但由于某种原因我不知道，即使存储在图层中的图形应该位于不同的位置（以及不同的属性），它也会不断重新修改相同的形状。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(); 
    }

我用尽了一切。我肯定错过了一些东西。

我已经做了一些搜索关于这个话题的，我发现一个评论有关我想要做的事：

基本上，你需要需要保持形状对象的数组和推新将对象添加到阵列上时添加一个新的形状。在亲族对象的setDrawStage（）方法中，循环访问数组并绘制每个对象。当我发布实验室时，我会通知你。

我已经查找了所有的setDrawStage（）方法，我找不到与它相关的太多数据。他还表示将for循环放入有点令人困惑的方法中，因为我不仅要绘制形状，还要将其存储在一个图层中（正如我为其他形状所做的那样）。

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

来源

2012-10-29 kaiwah.ng

我认为你有JavaScript关闭问题。更多关于该：

How do JavaScript closures work?

尝试移动所有的逻辑内部的for循环到一个函数以诱导范围。此外，而不是使用Kinetic.Shape，为什么不使用Kinetic.Circle？

来源

2012-11-03 07:00:46

谢谢！它现在运行良好，从未完全理解封闭的性质。无论如何，我使用形状而不是圆形，因为我在圆圈内绘制了条形图（使用半径作为高度），所以形状似乎是实现这一点的最明显的路线。 –

嘿，如果你可以直接添加一个jsfiddle或者代码，那将会很棒。我没有得到它的工作：/ – Dominik

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

来源

2013-04-30 14:14:49 riskman352

KineticJS - 动态创建形状

回答

相关问题