Перетаскиваемая группа, не меняет положения узлов в группе

Question

var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500,
});

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

var circle = new Kinetic.Circle({
    x: 10,
    y: 10,
    fill: 'red',
    radius: 10,
});

circle.on('dblclick', function () {
    console.log('x: ' + circle.getX() + ' y: ' + circle.getY());
});

selectedGroup.add(circle);
layer.add(selectedGroup);
stage.add(layer);
layer.draw();

http://jsfiddle.net/cekB3/3/

• Когда я дважды щелкаю по кругу, его позиция [10,10]
• Когда я перемещаю этот круг и дважды щелкаю по нему, его позиция [10,10]

Почему позиция не меняется? Я делаю что-то неправильно? или это баг?

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

Answer 1

Чтобы добавить хороший ответ @thescottknight:

Вы можете перемещать объект между контейнерами, используя myObject.moveTo(newContainer)

Таким образом, вы можете переместить circle2 из selectedGroup в той же координатной позиции на layer как это:

circle2.on('dblclick', function () {
    circle2.setX(selectedGroup.getX()+circle2.getX());    
    circle2.setY(selectedGroup.getY()+circle2.getY());
    circle2.moveTo(layer);
    layer.draw();
});

Answer 2

Причина, по которой положение круга не меняется, заключается в том, что getX а также getY относительно родительского элемента. Родительским элементом является selectedGroup перетаскиваемый. Есть 2 способа получить изменяющуюся позицию круга.

1. Использовать getAbsolutePosition Функция на круге, чтобы получить свою позицию:

   pos = circle.getAbsolutePosition();
   console.log('position=(' + pos.x + ', ' + pos.y + ')');
   

2. Используйте положение перетаскиваемого объекта и смещение круга:

   console.log('x: ' + (selectedGroup.getX() + circle.getX()) + ' y: ' + (selectedGroup.getY() + circle.getY()));