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]

为什么职位不变？难道我做错了什么？还是一个bug？

我注意到当我将圆圈更改为可拖动时，它的坐标会发生变化，但是我在一个组中有2个圆圈的问题，我希望能够同时移动它们并拥有它们的x和y改变。

Answer 1

圈子的位置没有变化的原因是getX和getY相对于父元素。父元素是selectedGroup可拖动的。有两种方法可以改变圆圈的位置。

使用圆圈上的getAbsolutePosition功能获取其位置：

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

使用可拖动的位置和圆的偏移量：

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

Answer 2

添加到@ thescottknight的好答案：

您可以使用myObject.moveTo(newContainer)

在容器之间移动对象

因此，您可以将selectedGroup中的circle2移动到layer上的相同坐标位置，如下所示：

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

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

2 个答案: