javascript - EaselJS - 拖动缩放父项的子项

Question

注意:** 这个问题现在已经解决了。请参阅下面我的回答中的“修复”。随意注入(inject)您认为合适的任何进一步知识。

首先，我一直在研究和搜索 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();
}

感谢任何帮助!

谢谢。

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();
}

更新的 fiddle 在这里: http://jsfiddle.net/MZ6LE/9/