簡體   English   中英

使用 KineticJS 在 JavaScript 中拖動多個圖層

[英]Dragging multiple layers in JavaScript with KineticJS

我正在嘗試同步拖動多個圖層。 這里的例子: 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);

問題是同步丟失了一些事件。 在做了一系列的短拖后,胡子層留在后面,好像它在途中遺漏了一些事件。

我的觀察導致了一個猜測,即快速拖動有效。 我的意思是如果你在不移動鼠標的情況下抓取圖像,向隨機方向快速移動,停止鼠標然后松開,圖層保持同步。 問題在於在鼠標移動時抓取和放開。

你能教我如何調試這類問題嗎? 對於事件相關的東西,是否有類似 TDD 的方法? 有什么方法可以記錄一系列事件而不是重播它,同時添加一些調試代碼? 經典的分步調試在這里毫無用處...

我會很簡單,

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

我的例子, http://jsfiddle.net/QTu8K/38 (更新)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM