使舞台可拖动，但始终保持特定形状处于相同的相对位置（KineticJS）答案

【问题标题】：Make stage draggable, but keep a specific shape always in the same relative position (KineticJS)使舞台可拖动，但始终保持特定形状处于相同的相对位置（KineticJS）
【发布时间】：2013-05-22 07:42:54
【问题描述】：

有谁知道，如何将舞台“拖到”某个形状或形状组的“后面”，这样该形状就不会与舞台上的所有其他项目一起拖动，当然还有舞台本身？

在我的示例中，我有一个舞台，其中包含<canvas>-tag 的可见部分之外的许多项目，只能通过向左/向右拖动舞台才能到达，但其中一个形状应始终在位置<canvas> 元素的 (0, 0) 并且不应在拖动舞台时更改其位置。

我还没有找到一种方法来做到这一点，所以如果有人知道如何让它工作，我会非常高兴。

【问题讨论】：

标签： html html5-canvas draggable kineticjs

【解决方案1】：

如果在画布 (0,0) 处留下的一个形状始终是相同的形状并且从不改变，您可以将所有其他元素添加到一个组中，不包括位于 (0,0) 处的形状，然后拖动组而不是拖动舞台。

如果您必须拖动舞台，则必须计算鼠标在拖动时移动的 x 距离，并将其应用于 (0,0) 处的形状位置。

【讨论】：

哦，对不起，我忘了说，有好几层，其他元素都被分成了，这使得分组是不可能的（只能分组和形状）。您能否更详细地解释一下根据更改的鼠标位置重新计算坐标的方法？谢谢:)
jsfiddle.net/projeqht/x89hw 在事件舞台“dragmove”上使用 stage.getX() 来查找舞台移动的 dx（x 的距离）。然后，从矩形的 X 位置减去 dx，以在舞台 X 移动时保持矩形的位置不变。请注意，我将舞台的拖动范围限制为仅 X 轴。
感谢您的工作。我会在接下来的几天里试一试。在 jsfiddle 中它可以完美运行，但我的代码似乎总是有自己的规则。最后一件事：这段代码在补间期间不起作用，是吗？因为在我的情况下，你给舞台一点推动力，补间做剩下的工作（为了平滑缓动）......
关于你的最后一件事：不，目前它在补间期间不起作用，因为 dx 仅根据鼠标/点击事件的 stage.on('dragmove') 计算。我还没有使用补间，但您可能希望在补间的回调函数中计算 dx (stage.getX())（当补间正在执行时）并在那里计算 dx！如果您能够在补间时计算 dx，您可以在舞台拖动移动和补间时将 dx 应用于矩形。祝你好运！
你知道如何在补间期间获得 dx，因为我目前正在使用补间移动“静态”形状，它与我用来移动的参数相同舞台，在相反的方向，也可以工作，但在过渡期间会引起一点“颤抖”。所以我猜，从 dx 重新计算 x （应该从补间返回）可以让我摆脱这种“颤抖”。