EaselJS-拖动缩放父级的子级 [英] EaselJS - dragging children of scaled parent

问题描述

注意：**现在已解决。请参阅下面我的答案中的 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/

正如您在最后的小提琴中看到的那样，节点并没有保持锁定到用户的鼠标操作。

我觉得我需要翻译全局变量节点在其缩放父级中的坐标。不过，当元素没有缩放比例时，我仍然看不到如何将节点的x / y设置为事件的stageX和stageY。

如果不进行缩放，则该节点仍位于父容器（不是主要容器）内，并且应具有相对于其父容器的坐标。因此，如果父节点偏移50，并且节点在其父节点内从0、0开始，则没有任何转换的全局stageX / Y属性不应表示节点的x / y。

如何立即使用，如下面的代码所示，以及如何在拖动已缩放比例的父级元素时对其进行调整？

 函数handleClick（event）{
 node.offset = {'x'：node.x-event.stageX，'y'：node.y -event.stageY}; 
} 
 
函数handleMove（event）{
 node.x = event.stageX + node.offset.x; 
 node.y = event.stageY + node.offset.y; 
 stage.update（）; 
} 
  

感谢您的帮助！

谢谢。

解决方案

已修复：
我正在尝试转换节点或项目的坐标被拖动，但实际上不是缩放比例。由于其父项是具有缩放比例的项目，因此我需要转换其坐标！

  function handleClick（e）{
 var global = container.localToGlobal（node.x，node.y）; 
 node.offset = {‘x’：global.x-e.stageX，‘y’：global.y-e.stageY}； 
} 
 
函数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/

NOTE: ** This is now resolved. See the 'FIX' in my answer below. Feel free to inject any further knowledge as you see fit.

First, I have been studying and googling the localToGlobal, localToLocal, and globalToLocal, but I am just not understanding these methods enough to accomplish what I am trying to achieve - a drag of items in a scaled parent.

I have a container which contains some graphical nodes. The container's scaleX and scaleY are at 0.5 (or any other arbitrary number).

When dragging the nodes, they need to move, within the scaled parent container, inline with the e.mouseX/Y (which seems to be the same as Stage.mousX/Y).

Below are some jsfiddles to demonstrate

No Scale - works fine wih standard drag/drop code: http://jsfiddle.net/MZ6LE/1/

Scaled - fails with standard drag/drop code: http://jsfiddle.net/MZ6LE/3/

As you can see with the last fiddle, the 'node' doesn't stay 'locked' to the user's mouse action.

I feel that I need to translate the global coordinates for the node in its scaled parent. Still, I don't see how setting the node's x/y to the event's stageX and stageY works when there is no scaling of the elements.

With no scaling, the node is still within a parent container - not the main stage - and should have coordinates relative to its parent. So, if the parent is offset by 50, and the node starts at 0, 0, within its parent, the global stageX/Y properties should not represent the x/y of the node without some sort of translation.

How does this work out of the box, as shown in the code below, and how can it be adjusted for dragging elements within a parent that is scaled?

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

Any help is appreciated!

Thanks.

解决方案

FIXED: I was trying to translate coordinates for the 'node' or item being dragged, but it wasn't what was actually scaled. Since its parent was the item that had the scaling, I needed to translate its coordinates!

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

The updated fiddle is here: http://jsfiddle.net/MZ6LE/9/

这篇关于EaselJS-拖动缩放父级的子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！