KineticJS - 동적으로 모양의 배열을 만들고 이벤트를 사용합니다.

Question

나는 모양의 배열을 동적으로 생성 할 수 있었고 서로 다른 좌표에 배치되었습니다.

그러나 루프 내에서 이벤트를 할당하려고하면 클릭 결과는 항상 동일합니다. 마치 click 이벤트가 내 루프의 마지막 반복을 계속 참조하는 것과 같습니다.

내가 뭘 잘못하고 있니? 감사!

편집 : 나는이 네 라벨에 다양한 이벤트를 추가하려면 어떻게

var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 1024, 
     height: 768 
    }); 
    var layer = new Kinetic.Layer(); 
    singleSegment=40; 
    for (var i = 0; i < 4; i++) { 
       depth=singleSegment+(singleSegment*i); 
       dotLabel = new Kinetic.Text({ 
        x: depth, 
        y: depth, 
        text: "test" 
       }); 
       dotLabel.on('click', function(evt){ 
        console.log(this.x); 
       }); 
       layer.add(dotLabel); 
    } 
    stage.add(layer); 

: 사실, 격리 된 환경에서이 동작을 다시 제작?

Answer 1

당신은 모든 것이 정확하다고 생각합니다. 그러나 이것 때문에;

  console.log(i); 

I의 마지막 값에 Array.length-1이며,이 클릭되면 클릭했을 때 루프의 외부에 있기 때문에 변하지 않는다, 그 값을 나타낸다.

다른 값을 표시합니다.

  console.log(this.attrs.x); 

Answer 2

나는이 동일한 문제를 해결해야했습니다. 각 모양에 위치를 저장하여 문제를 해결했습니다. 이러한 호 때문에 시작과 끝 각도를하지만, 그냥 쉽게 x와 y 포인트가 될 수있다 - 객체가 생성 될 때

for (var axisItem=0;axisItem<innerCircleXAxisArray.length;axisItem++) 
     { 
      var arc = new Kinetic.Shape({ 
       drawFunc: function(canvas){ 
        var allAttrs = this.getAttrs(); 
        var start = allAttrs['start']; 
        var end = allAttrs['end']; 
        var context = canvas.getContext(); 
        context.strokeStyle = 'red'; 

        var centerOfCanvasX = canvasWidth/2; 
        var centerOfCanvasY = canvasHeight/2; 

        context.translate(centerOfCanvasX, centerOfCanvasY); 
        context.lineWidth = 15; 
        context.beginPath(); 
        context.arc(0, 0, 284, start , end, true); 
        canvas.stroke(this); // Fill the path 
        context.closePath(); 
        context.translate(-centerOfCanvasX, -centerOfCanvasY); 
       }, 
       fill: 'red', 
       stroke: 'red', 
       strokeWidth: 15 
      }); 


      arc.setAttrs({'start': innerCircleXAxisArray[axisItem]['start'], 'end': innerCircleXAxisArray[axisItem]['end']}); 

      layer.add(arc); 
     } 
     stage.add(layer); 

, 나는 개체의 위치를 ​​저장하는 setAttrs를 사용합니다. 그런 다음 drawFunc에서 getAttrs를 사용하여 해당 데이터를 검색하고 객체를 그립니다.