KineticJS - динамически создавать массив фигур и использовать события

Мне удалось динамически создать массив фигур, и они хорошо расположены в разных координатах.KineticJS - динамически создавать массив фигур и использовать события

Однако, когда я пытаюсь назначить событие в этом цикле, результат клика всегда один и тот же. Как будто событие click по-прежнему ссылается на последнюю итерацию моего цикла.

Что я делаю неправильно? Благодаря!

EDIT: На самом деле, вновь произвел такое поведение в изолированной среде:

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);

Как добавить различные события в этих четырех наклейками?

источник

2013-03-15 Tony Sepia

Я не лучший человек, чтобы объяснить закрытие javascript, но с удачей, возможно, кто-то другой может. В противном случае вам придется искать в Google –

@ JaniHyytiäinen, похоже, что это проблема с областью. Но я не понимаю, что именно не так. Я сделал код выше, поэтому его можно протестировать в любом месте. –

Вы все исправите, я думаю. но из-за этого;

  console.log(i);

Последнее значение I является array.length-1, и, когда она нажата, это показывает, что значение, которое не изменится, потому что это вне цикла, когда она нажата.

Это будет показывать различное значение.

  console.log(this.attrs.x);

источник

2013-03-15 18:53:37 allenhwkim

Спасибо за ваш ответ! Но когда я добавляю это, я получаю «undefined» в консоли. Это проблема масштаба? Могу ли я добавить эти фигуры в глобальный объект «узел», а затем получить доступ к их свойствам через это? –

Я также добавил более чистый кусок кода, который вы вставляете в свой html-документ. Тот же результат. Я использую kinetic-v4.3.1-beta2.js –

попробуйте this.attrs.x – allenhwkim

Мне просто пришлось иметь дело с этой же проблемой. Я решил это, сохранив каждую фигуру свое местоположение.

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 для извлечения этих данных и рисования объекта.

источник

2013-04-11 02:27:51 VikR

KineticJS - динамически создавать массив фигур и использовать события

ответ

Смежные вопросы