从“拖动"图标中移动图层后,事件丢失.打回来 [英] Events are lost after moving layer from within a "dragmove" callback
问题描述
我有一个可移动图层的滚动条,因此在滚动条的拖动"回调中移动了该图层.这将导致所有绑定的事件在已移动的图层上都断开连接!
请查看以下小提琴: http://jsfiddle.net/NY4QK/10/ >
var stage = new Kinetic.Stage({
container: 'container',
width: 200,
height: 200,
});
var fixedLayer = new Kinetic.Layer();
stage.add(fixedLayer);
var old_x = 100;
var old_y = 100;
var scroller = new Kinetic.Circle({
x: old_x,
y: old_y,
radius: 10,
fill: '#00F',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
scroller.on('dragmove', function(event){
var pos = scroller.getAbsolutePosition();
layer.move(pos.x - old_x, pos.y - old_y);
old_x = pos.x;
old_y = pos.y;
layer.draw();
});
fixedLayer.add(scroller);
var layer = new Kinetic.Layer();
stage.add(layer);
var rect = new Kinetic.Rect({
x: 10,
y: 10,
width: 50,
height: 50,
fill: '#0F0',
stroke: 'black',
strokeWidth: 4
});
rect.on('click', function(){
rect.remove();
layer.draw();
});
layer.add(rect);
layer.draw();
fixedLayer.draw();
这是错误还是我做错了什么?
使用拖动事件时,KineticJS在顶部创建一个临时层,因此您的事件在dragmove
之后不会被注册.>
只需为dragend
添加另一个处理程序,如下所示:
scroller.on('dragend', function(event){
layer.moveToTop();
layer.draw();
});
这是更新的小提琴.
有关所面临问题的更多详细信息/说明,请检查以下内容: https://github.com. com/ericdrowell/KineticJS/issues/219
I have a scrollbar that moves a layer, so the layer is moved while in the scrollbar's "dragmove" callback. This causes all bound events to be disconnected on the moved layer!
Please see this fiddle: http://jsfiddle.net/NY4QK/10/
var stage = new Kinetic.Stage({
container: 'container',
width: 200,
height: 200,
});
var fixedLayer = new Kinetic.Layer();
stage.add(fixedLayer);
var old_x = 100;
var old_y = 100;
var scroller = new Kinetic.Circle({
x: old_x,
y: old_y,
radius: 10,
fill: '#00F',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
scroller.on('dragmove', function(event){
var pos = scroller.getAbsolutePosition();
layer.move(pos.x - old_x, pos.y - old_y);
old_x = pos.x;
old_y = pos.y;
layer.draw();
});
fixedLayer.add(scroller);
var layer = new Kinetic.Layer();
stage.add(layer);
var rect = new Kinetic.Rect({
x: 10,
y: 10,
width: 50,
height: 50,
fill: '#0F0',
stroke: 'black',
strokeWidth: 4
});
rect.on('click', function(){
rect.remove();
layer.draw();
});
layer.add(rect);
layer.draw();
fixedLayer.draw();
Is this a bug or am I doing something wrong?
When you use a drag event, KineticJS create a temporary layer on top as a result of which your events where not getting registered after the dragmove
.
Just add another handler for dragend
like this:
scroller.on('dragend', function(event){
layer.moveToTop();
layer.draw();
});
And here is the updated fiddle.
For more details/explanation on the problem you faced, check this: https://github.com/ericdrowell/KineticJS/issues/219
这篇关于从“拖动"图标中移动图层后,事件丢失.打回来的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!