EaselJS - 缩放父级后拖动其子元素

Question

注意：**此问题已解决。请参见下面我回答中的“FIX”部分。 如有需要，请随意注入更多知识。

首先，我一直在研究和搜索localToGlobal、localToLocal和globalToLocal方法，但我仍然不太了解这些方法，无法实现我想要的目标——在缩放的父容器中拖动项目。

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

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

以下是一些jsfiddles来演示

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

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

正如您在最后一个fiddle中看到的那样，“节点”不能始终“锁定”到用户的鼠标操作。

我觉得我需要在其缩放的父级中转换节点的全局坐标。但是，当元素没有缩放时，我不明白将节点的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();
}

非常感谢您的帮助！

谢谢。

- egaudette

---

好的，所以我得到了同事的一点帮助，他指出了我的问题。修复方法已在上面注明。 - egaudette

Answer 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/

- egaudette