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检索该数据并绘制对象。