javascript - 通过向形状添加事件来创建 Canvas [KineticJs]

Question

我正在尝试使用 KineticJs 创建绘图 Canvas ，这是 jsfiddle 上的代码: http://jsfiddle.net/thekucays/k7ZMc/2/

在上面的代码中，我试图创建一个矩形，并向我创建的每个矩形添加一个事件监听器。(第 115 行)

var item = layer.get('.rect1');
item.on('click', function(){
    item.setFill('RED');
});

但是当我执行它时，如果我单击 Canvas 上的任何矩形，该事件将在我创建的最后一个矩形上触发。我上面的代码有什么问题吗？

最诚挚的问候，卢基·R·龙皮斯

Answer 1

您正在使用:

 var item = layer.get('.rect1'+rect_counter); //dont user "+rec_counter" as this is what binds it to the LAST element
 item.on('click', function(){
    item.setFill('RED');
 });

尝试一种更基本的解决方法:--------这个最适合我----------

 var itemsList = layer.getChildren(); //gets all shapes in this layer
 for(var i=0; i<itemsList.length; i++){
      if(itemsList.getName == 'rect1'){ //since you named your rectangles 'rect1' check name
          itemsList[i].on('click', function(){
             item.setFill('RED');
          });
      }
 };

或者只是尝试使用:

 var item = layer.get('.rect'); //all rectangles, without number
 item.on('click', function(e){ // I think you need an 'e' here
     item.setFill('RED');
 });
 // I doubt this will work as ALL your rectangles need to have the same name if you want to .get() them all