0

我设法动态地创建了一个形状数组，并且它们很好地放置在不同的坐标处。

但是，当我尝试在该循环中分配事件时，单击的结果总是相同的。好像点击事件仍在引用我循环的最后一次迭代。

我究竟做错了什么？谢谢！

编辑：实际上，在孤立的环境中重新产生了这种行为：

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

如何为这四个标签添加不同的事件？

4

2 回答 2

2

我认为你做的一切都是正确的。但正因为如此；

            console.log(i);

i的最后一个值是array.length-1，当它被点击时，它会显示那个值，它不会改变，因为它被点击时它在循环之外。

这将显示不同的价值。 

            console.log(this.attrs.x);
于 2013-03-15T18:53:37.523 回答
1

我只需要处理同样的问题。我通过将其位置存储到每个形状来解决它。

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

于 2013-04-11T02:27:51.033 回答