使用KineticJS在JavaScript中拖动多个层

我正在尝试同步拖动多个图层。示例如下：

问题是同步缺少一些事件。在做了一系列的短拖拽后，胡子层留在后面，就好像它在途中错过了一些事件一样

我的观察得出一个猜想，快速拖动是有效的。我的意思是，如果你抓取图像而不移动鼠标，在随机方向快速移动，停止鼠标，然后放开，图层保持同步。问题是在鼠标移动时抓住并放开

你能教我如何调试这类问题吗？对于与事件相关的内容，是否有类似TDD的方法？在添加一些调试代码的同时，是否可以记录一系列事件并进行回放？经典的一步一步的调试在这里是毫无用处的…

我会说得很简单

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

以我为例,，

---

（已更新）

您面临的问题可以解决，但导致问题的事件基本上已连接到浏览器中。如何简化创建组的代码，它就像一个容器和一个节点一样工作。因此，您可以将图像和所有其他绘制的项目添加到组中，它们的位置将相对于组，因此组中的所有拖动操作将相对地拖动所有内容。您创建一个图层仅用于图片，另一个图层用于绘制项目，有什么特殊原因吗？此外，您应该尝试为“胡须”指定一个x、y位置，并使用setPosition（）移动胡子。也可以使用stage.getUserPosition（）来代替event.clientX/Y，同时获取x和Y值。我正在尝试创建一个界面，用于在图片上标记一些功能，并可以放大和缩小以获得高精度。但是当放大时，我不想让标记变大——只想看到下面的图像。类似于谷歌地图上的位置标记。关于胡子的位置——如果你是指重构，我当然同意。这只是测试片段。你能解释一下event.clientX/Y和stage.getUserPosition（）之间的区别吗？我不知道确切的区别，但是getUserPosition是KineticJS的内置函数，用于鼠标和触摸事件。基本上，getUserPosition将一次性获得x和y并返回一个对象。ClientX/Y都返回整数。而且，使用函数更“优雅”。。。这在一小段代码中并不重要。这把小提琴对你们有用吗？我在firefox上，它没有显示任何东西我用这种方法创建了一个功能性的小提琴，为Kinetic 5更新：

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