이 모양에 이벤트를 추가로 캔버스를 만들 [KineticJs]

Question

내가 KineticJs을 사용하여 도면 캔버스를 만들려고 해요, 여기 jsfiddle의 코드는 그리고 .. 내가 만든 모든 단일 RECT에

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

를 (115)를 이벤트 리스너를 추가하지만 난 캔버스에 어떤 RECT를 클릭하면 내가 그것을 실행하면, 마지막 RECT에 이벤트가 발생 내가 만들었습니다. 위의 코드에 어떤 문제가 있습니까?

안부, 루키 R Rompis

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 

Answer 2

안녕하세요 :) 음 ... 내 코드에 내가 왜 rect_counter를 사용했는지는 내가 마지막 rect i 추적을 원한다는 것입니다. 그래서 나는 첫 번째 rect에서 루프를 넘어 바인딩 할 필요가 없습니다. 행사 ..

지금

난에 (MouseUp 이벤트에) 변경 :

지금

var rects = stage.get('.rect'+rect_counter); 
rects.on('click', function(){ 
    this.setAttrs({ 
     fill: 'red' 
    }); 
    //layer.draw(); 
}); 

는 지금까지 works..and 그래서 당신의 도움 :)

최선 good..thanks 안부,

루키 R Rompis