假设我有以下代码,该事件似乎只是时不时地触发,请看以下两个示例。
第一个示例效果很好,并且事件每次都会按预期触发
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/
任何关于这方面的帮助都会很棒,花了几个小时却找不到有效的解决方案?
最佳答案
节点太“薄”且重叠太多,事件无法正常触发。
尝试增加每个节点的高度并添加更少的节点。
例如,将 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'
});
// ...
}
关于javascript - Kinetic js Canvas 将事件监听器添加到for循环内的多个点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14435526/