kinetic js canvas adding event listener to multiple points within for loop

Question

Say i have the following code the event only seems to be firing every now and again take the two following examples.

First example this works great and the event fires everytime as expected

for (var i = 0; i < items; i++) {
            var rect = new Kinetic.Rect({
                x: 0,
                y: 1+i,
                width: 100,
                height: 2,
                fill: 'green'
            });
            rect.on('mouseover', function(evt) {
                $('#console').text(evt.shape.index);
            });
            layer.add(rect);
        }

view in action http://jsfiddle.net/6aTNn/5/

Here is my issue when adding a rotate value on the event doesn't seem to be firing correctly.

for (var i = 0; i < items; i++) {
            var rect = new Kinetic.Rect({
                x: stage.getWidth() / 2,
                y: stage.getHeight() / 2,
                width: 100,
                height: 1,
                fill: 'green'
            });
            rect.on('mouseover', function(evt) {
                console.log(evt.shape.index);
                $('#console').text(evt.shape.index);
            });
            rect.rotate(i * angularSpeed / items);
            // add the shape to the layer
            layer.add(rect);
        }

view in action http://jsfiddle.net/6aTNn/8/

Any help on this would be great been at this for hours and cant find a solution that works?

Answer 1

The nodes are too 'thin' and too overlapped for the event to fire properly.

Try increasing the height of each node and adding fewer of them.
For example, replace the i++ with i += 3 and increase the height to 2 .

for (var i = 0; i < 800; i += 3) {
    var rect = new Kinetic.Rect({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        width: 100,
        height: 2,
        fill: 'green'
    });
    // ...
}