EaselJS - перетаскивание дочерних элементов масштабированного родителя

Question

ПРИМЕЧАНИЕ: ** Это разрешено. См. «ИСПРАВЛЕНИЕ» в моем ответе ниже. Не стесняйтесь вводить любые дополнительные знания по своему усмотрению.

Во-первых, я изучаю и googling localToGlobal, localToLocal и globalToLocal, но я просто не понимаю этих методов, чтобы достичь того, чего я пытаюсь достичь, - перетаскивания элементов в масштабированном родителе.

У меня есть контейнер, который содержит некоторые графические узлы. Шкала масштаба X и масштабY равны 0,5 (или любому другому произвольному номеру).

При перетаскивании узлов им необходимо перемещать в пределах масштабированного родительского контейнера в линию с помощью e.mouseX/Y (что похоже на Stage.mousX/Y).

Ниже приведены некоторые jsfiddles продемонстрировать

Нет Scale - штраф Жека стандартного сопротивления работы/падение код: http://jsfiddle.net/MZ6LE/1/

Чешуйчатый - несоответствие со стандартным сопротивлением/падение код: 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/