Question

注意：**现在已经解决了。请参阅下面的答案中的“FIX”。您可以随意注入任何进一步的知识。

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

感谢任何帮助！

感谢。

Answer 1

FIXED：我试图翻译被拖动的'节点'或项目的坐标，但它实际上并没有缩放。由于它的父项是具有缩放的项目，我需要翻译它的坐标！

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/

EaselJS - 拖动缩放父级的子级

1 个答案: