使用KineticJS在JavaScript中拖动多个图层

我试图同步拖动多个图层。示例：http://jsfiddle.net/e8Z3a/使用KineticJS在JavaScript中拖动多个图层

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);

问题是同步丢失了一些事件。在做了一系列短暂的拖拽之后，留下的胡须层，就好像它在路上丢失了一些事件。

我的观察导致猜测，即快速拖动的作品。我的意思是，如果您在不移动鼠标的情况下抓取图像，可以随机快速移动，停止鼠标然后放开，图层保持同步。问题是在鼠标移动时抓住并放开。

你能教我如何调试这类问题吗？是否有类似于TDD的方法来处理事件相关的东西？任何方式可能记录一系列事件并重播它，同时添加一些调试代码？经典的一步一步的调试是在这里很没用......

来源

2013-02-13 ssobczak

你所面临的问题是可以解决的，但导致问题的事件几乎与浏览器连接。什么可以简化创建组的代码，它同时可以像容器和节点一样工作。所以你可以将你的形象和所有其他绘制的物品添加到组中，并且他们的位置将与组相关，因此所有拖动组都会相对拖拽一切。是否有一个特定的原因，你正在为图片和另一个绘制物品创建一个图层？ – SoluableNonagon 2013-02-13 22:11:05

另外，你应该尝试为你的'小胡子'分配一个x，y的位置，并用setPosition（）移动小胡子。也可以使用stage.getUserPosition（）代替event.clientX/Y，同时获取x和y值。 – SoluableNonagon 2013-02-13 22:13:32

我正在尝试创建界面来标记图片上的某些功能，并且可以放大和缩小高精度。但是，放大时，我不希望标记变大 - 仅仅是底层图像。类似于Google地图上的地标。 – ssobczak 2013-02-14 00:36:44

我会去简单，

imageLayer.on('dragmove', function() { 
    drawingLayer.setAttrs({x:this.getX(), y:this.getY()}); 
    drawingLayer.draw(); 
});

我的例子， http://jsfiddle.net/QTu8K/38（更新）

来源

2013-02-15 17:50:31 allenhwkim

这是简单的DAMN！ – ssobczak 2013-02-15 18:52:24

我会把它当作恭维，谢谢 – allenhwkim 2013-02-15 18:54:24

这是一个小提琴为你们工作吗？我在Firefox上，它不显示任何东西 – 2014-03-14 14:51:28

使用KineticJS在JavaScript中拖动多个图层

回答

相关问题