Question

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

但是，当我尝试在该循环中分配事件时，click的结果始终相同。好像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来检索该数据并绘制对象。

KineticJS - 动态创建形状数组并使用事件

2 个答案: