javascript - 可拖动组，不更改组中的节点位置

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]

为什么位置不变？难道我做错了什么？或者它是一个错误？

我注意到，当我将圆圈更改为可拖动时，它的坐标会发生变化，但是我遇到了一组中有 2 个圆圈的问题，我希望能够同时移动它们并让它们的 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可拖动的。有两种方法可以获得圆的变化位置。

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