CODEWITHSUNDEEP
javascriptcanvashtml5-canvaskineticjs
user1503606
user1503606

Reputation: 4290

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

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?

Upvotes: 1

Views: 1503

Answers (1)

MikeM
MikeM

Reputation: 13631

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'
    });
    // ...
}

Upvotes: 1

Related Questions