[英]Dragging multiple layers in JavaScript with KineticJS
I'm trying to synchronize dragging of multiple layers.我正在尝试同步拖动多个图层。 Example here: http://jsfiddle.net/e8Z3a/
这里的例子: http : //jsfiddle.net/e8Z3a/
var stage = new Kinetic.Stage({
container: document.getElementById('canvas'),
width: 600,
height: 600
});
var imageLayer = new Kinetic.Layer();
stage.add(imageLayer);
var imageObj = new Image();
imageObj.src = 'http://laughingsquid.com/wp-content/uploads/Tard2.jpg';
imageObj.onload = function () {
var image = new Kinetic.Image({
image: imageObj
});
imageLayer.add(image);
imageLayer.setWidth(imageObj.naturalWidth);
imageLayer.setHeight(imageObj.naturalHeight);
imageLayer.draw();
};
var drawingLayer = new Kinetic.Layer();
stage.add(drawingLayer);
var mustache = new Kinetic.Polygon({
points: [
380, 380,
410, 350,
380, 390,
210, 390,
180, 350,
210, 380
],
fill: 'black'
});
drawingLayer.add(mustache);
drawingLayer.draw();
var posX, posY;
imageLayer.on('dragstart', function(event) {
posX = event.clientX;
posY = event.clientY;
});
imageLayer.on('dragmove dragend', function(event) {
drawingLayer.move(event.clientX - posX, event.clientY - posY);
drawingLayer.draw();
posX = event.clientX;
posY = event.clientY;
});
imageLayer.setDraggable(true);
The problem is the sync is missing some events.问题是同步丢失了一些事件。 After doing a series of short drags, the mustache layer stays behind, as if it was missing some events on the way.
在做了一系列的短拖后,胡子层留在后面,好像它在途中遗漏了一些事件。
My observation leads to a guess, that fast dragging works.我的观察导致了一个猜测,即快速拖动有效。 I mean if you grab the image without moving the mouse, move quickly in random directions, stop the mouse and then let go, layers stay in sync.
我的意思是如果你在不移动鼠标的情况下抓取图像,向随机方向快速移动,停止鼠标然后松开,图层保持同步。 The problem is with grabbing and letting go while the mouse moves.
问题在于在鼠标移动时抓取和放开。
Can you teach me how to debug this kind of problems?你能教我如何调试这类问题吗? Is there a TDD-like approach for events related stuff?
对于事件相关的东西,是否有类似 TDD 的方法? Any way to maybe record a series of events and than replay it, while adding some debug code?
有什么方法可以记录一系列事件而不是重播它,同时添加一些调试代码? Classic step-by-step debugging is quite useless here...
经典的分步调试在这里毫无用处...
I would go simple,我会很简单,
imageLayer.on('dragmove', function() {
drawingLayer.setAttrs({x:this.getX(), y:this.getY()});
drawingLayer.draw();
});
My example, http://jsfiddle.net/QTu8K/38 (updated)我的例子, http://jsfiddle.net/QTu8K/38 (更新)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.