кинетический js холст, добавляющий прослушиватель событий к нескольким точкам в цикле for

Скажем, у меня есть следующий код, событие, кажется, срабатывает только время от времени, возьмите два следующих примера.

Первый пример отлично работает, и событие срабатывает каждый раз, как и ожидалось.

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

просмотр в действии http://jsfiddle.net/6aTNn/5/

Вот моя проблема, когда добавление значения поворота к событию, похоже, не срабатывает правильно.

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

просмотр в действии http://jsfiddle.net/6aTNn/8/

Любая помощь в этом была бы отличной, занималась бы этим часами и не может найти решение, которое работает?


javascript canvas html5-canvas kineticjs
person user1503606    schedule 21.01.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Узлы слишком «тонкие» и слишком перекрываются, чтобы событие могло срабатывать должным образом.

Попробуйте увеличить высоту каждого узла и добавить меньше узлов.
Например, замените i++ на i += 3, а height увеличьте до 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'
    });
    // ...
}
person MikeM    schedule 21.01.2013