KinetikJS Держите границы при перетаскивании объекта

Question

Хейхей, во время изучения JS и использования KineticJS я застрял с небольшой проблемой.

Поскольку сейчас я не могу вставить свой собственный код в скрипку, давайте рассмотрим этот пример: http://jsfiddle.net/m1erickson/n5xMs/

Если мы сделаем белый прямоугольник также перетаскиваемым:

        var white = new Kinetic.Rect({
        x: 20,
        y: 20,
        width: 300,
        height: 300,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });

dragBoundFunc больше не будет работать правильно, если белый прямоугольник перемещается. При отладке этого с помощью coda2 я обнаружил, что при перемещении белого прямоугольника атрибуты x и y не меняются.

Почему это так? Как мне сделать так, чтобы dragBoundFunc работал для перемещения родительских фигур?

Заранее спасибо за помощь.

Answer 1

Прежде всего:

Я обнаружил, что при перетаскивании белого прямоугольника атрибуты x и y не меняются.

Нет, потому что они определены статически. Если вы хотите изменить значения, вы хотите получить обновленные значения в пределах dragBoundFunc, Это может быть так же просто, как рассчитать их так же, как сейчас, но внутри этой функции.

Как мне сделать так, чтобы dragBoundFunc работал для перемещения родительских фигур?

В вашем примере белый прямоугольник не является родителем чего-либо, это просто фигура, нарисованная на той же сцене, что и оранжевый прямоугольник. То, что вы хотите сделать, это сделать белый фон фигуры и оранжевый прямоугольник обоими потомками одного и того же узла и перетащить его. Самый прямой способ сделать это здесь - сделать сам слой перетаскиваемым, например:

var layer = new Kinetic.Layer({draggable: true});

Но то, как вы это делаете, произвольно. Белые и оранжевые коробки также могут быть детьми другого Kinetic.Container, например.