EaselJS - 拖动缩放父级的子级答案

【问题标题】：EaselJS - dragging children of scaled parentEaselJS - 拖动缩放父级的子级
【发布时间】：2014-01-28 14:50:02
【问题描述】：

注意：** 现在已解决。请参阅下面我的答案中的“修复”。如果您认为合适，请随意注入任何进一步的知识。

首先，我一直在研究和搜索 localToGlobal、localToLocal 和 globalToLocal，但我对这些方法的理解不足以完成我想要实现的目标 - 在缩放的父项中拖动项目。

我有一个包含一些图形节点的容器。容器的 scaleX 和 scaleY 为 0.5（或任何其他任意数字）。

拖动节点时，它们需要在缩放的父容器内移动，与 e.mouseX/Y 内联（这似乎与 Stage.mousX/Y 相同）。

下面是一些 jsfiddles 来演示

无比例 - 使用标准拖放代码可以正常工作： http://jsfiddle.net/MZ6LE/1/

Scaled - 使用标准拖放代码失败： http://jsfiddle.net/MZ6LE/3/

正如您在最后一个小提琴中看到的那样，“节点”不会“锁定”用户的鼠标操作。

我觉得我需要在其缩放的父节点中转换节点的全局坐标。尽管如此，当没有缩放元素时，我看不到将节点的 x/y 设置为事件的 stageX 和 stageY 是如何工作的。

在没有缩放的情况下，节点仍然在父容器中 - 不是主阶段 - 并且应该具有相对于其父级的坐标。因此，如果父节点偏移 50，并且节点在其父节点内从 0、0 开始，则全局 stageX/Y 属性不应表示没有某种平移的节点的 x/y。

这是如何开箱即用的，如下面的代码所示，如何调整它以在缩放的父级中拖动元素？

function handleClick(event) {
    node.offset = {'x' : node.x - event.stageX, 'y' : node.y - event.stageY};
}

function handleMove(event) {
    node.x = event.stageX + node.offset.x;
    node.y = event.stageY + node.offset.y;
    stage.update();
}

感谢任何帮助！

谢谢。

【问题讨论】：

好的，所以我从一位同事那里得到了一点帮助，他指出了我的问题。上面提到了修复

标签： javascript easeljs

【解决方案1】：

固定：我试图翻译“节点”或被拖动项目的坐标，但这不是实际缩放的。由于它的父项是具有缩放的项目，因此我需要转换它的坐标！

function handleClick(e) {
    var global = container.localToGlobal(node.x, node.y);
    node.offset = {'x' : global.x - e.stageX, 'y' : global.y - e.stageY};
}

function handleMove(e) {
    var local = container.globalToLocal(e.stageX + node.offset.x, e.stageY + node.offset.y);
    node.x = local.x;
    node.y = local.y;
    stage.update();
}

更新的小提琴在这里： http://jsfiddle.net/MZ6LE/9/

【讨论】：