[英]kinetic js canvas adding event listener to multiple points within for loop
说我有以下代码,该事件似乎似乎不时地触发,并举两个以下示例。
第一个示例效果很好,并且事件每次都按预期触发
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++
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'
});
// ...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.