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

我只需要處理同樣的問題。 我通過存儲每個形狀的位置來解決它。

    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存儲對象的位置-起點和終點角度，因為它們是圓弧，但也可以很容易地將其作為x和y點。 然后在drawFunc中，我使用getAttrs檢索該數據並繪制對象。