使用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中拖動多個圖層

回答

相關問題