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

【问题标题】：Dragging multiple layers in JavaScript with KineticJS使用 KineticJS 在 JavaScript 中拖动多个图层
【发布时间】：2013-02-13 20:51:42
【问题描述】：

我正在尝试同步拖动多个图层。此处示例：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 的方法来处理与事件相关的内容？有什么办法可以记录一系列事件而不是重播它，同时添加一些调试代码？经典的一步一步调试，在这里完全没用……

【问题讨论】：

您面临的问题可以解决，但导致问题的事件几乎与浏览器有关。什么可以简化创建组的代码，它可以同时像容器和节点一样工作。因此，您可以将图像和所有其他绘制的项目添加到组中，并且它们的位置将相对于组，因此组的所有拖动都会相对拖动所有内容。您为图片创建一个图层而为绘制的项目创建另一个图层是否有特殊原因？
另外，您应该尝试将 x,y 位置分配给您的“小胡子”，并使用 setPosition() 移动小胡子。您也可以使用 stage.getUserPosition() 代替 event.clientX/Y，获取 x 和 y 值。
我正在尝试创建用于在图片上标记某些功能的界面，并且可以放大和缩小以实现高精度。但是在放大时，我不希望标记变大 - 只是底层图像。类似于 Google 地图上的地标。
关于胡子的位置——如果你的意思是重构，我当然同意。这只是测试sn-p。你能解释一下 event.clientX/Y 和 stage.getUserPosition() 有什么区别吗？
我不知道确切的区别，但 getUserPosition 是 KineticJS 的内置函数，用于鼠标和触摸事件。基本上，getUserPosition 将一次性获取 x 和 y 并返回一个对象。 ClientX/Y 都返回整数。此外，它更“优雅”地使用函数......这在一小段代码中并不重要。

标签： javascript events dom-events kineticjs

【解决方案1】：

我会很简单，

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

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

【讨论】：

这个小提琴适合你们吗？我在firefox上，什么都没有显示
我用这种方法创建了一个功能正常的 Fiddle，针对 Kinetic 5 进行了更新：jsfiddle.net/QTu8K/38