我正在尝试同步拖动多个图层。此处示例: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);
问题是同步缺少一些事件。在进行了一系列的短拖动之后, mustache 层留在后面,好像它在途中错过了一些事件。
我的观察得出一个猜测,即快速拖动有效。我的意思是,如果您在不移动鼠标的情况下抓取图像,在随机方向上快速移动,停止鼠标然后松开,层将保持同步。问题在于鼠标移动时的抓取和放开。
你能教我如何调试这类问题吗?对于事件相关的东西,是否有类似 TDD 的方法?在添加一些调试代码的同时,有什么方法可以记录一系列事件而不是重播它?经典的逐步调试在这里毫无用处...
最佳答案
我会简单一点,
imageLayer.on('dragmove', function() {
drawingLayer.setAttrs({x:this.getX(), y:this.getY()});
drawingLayer.draw();
});
我的例子, http://jsfiddle.net/QTu8K/38 (更新)
关于javascript - 使用 KineticJS 在 JavaScript 中拖动多层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14862884/