动态JS Canvas将事件侦听器添加到循环内的多个点答案

【问题标题】：kinetic js canvas adding event listener to multiple points within for loop动态JS Canvas将事件侦听器添加到循环内的多个点
【发布时间】：2013-01-04 07:46:30
【问题描述】：

假设我有以下代码，事件似乎只是不时触发，以下面两个示例为例。

第一个例子效果很好，事件每次都按预期触发

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

【解决方案1】：

节点太“薄”且重叠太多，事件无法正常触发。

尝试增加每个节点的高度并减少它们的数量。
例如，将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'
    });
    // ...
}

【讨论】：