拖动所选元素不在 konvajs 中的组

Question

KonvaJs 中有没有办法一次拖动多个元素而不对它们进行分组？

Answer 1

这个想法是：监听dragmove事件，对需要移动的所有其他对象应用位置差异。

let oldX, oldY;
layer.on('dragstart', (e) => {
oldX = e.target.x();
oldY = e.target.y();
});
layer.on('dragmove', (e) => {
const diffX = e.target.x() - oldX;
const diffY = e.target.y() - oldY;
// move everyone
layer.children.each((child) => {
// skip draggable circle
if (child === e.target) {
return;
}
// move other nodes
child.x(child.x() + diffX);
child.y(child.y() + diffY);
});
oldX = e.target.x();
oldY = e.target.y();
});

演示：http://jsbin.com/babasibudi/1/edit?js,output

Answer 2

我在组内有组(有时在组内也有组(，所以为了适应这样的设置，我修改了@lavrton答案以使用递归：

let oldX, oldY;
layer.on('dragstart', (e) => {
oldX = e.target.x();
oldY = e.target.y();
});
layer.on('dragmove', (e) => {
// Next line you may use any other Konva.Container instead of 'layer'
// A group of your choosing, e.g. group.getChildren().each(...
layer.getChildren().each((child) => {
let recursion = (node: Konva.Node) => {
if (node instanceof Konva.Container) {
node.getChildren().each(recursion)
} else {
if (node === e.target) {
console.log('SKIPPED')
return
}
node.x(node.x() + diffX)
node.y(node.y() + diffY)
}
}
recursion(child)
})           
element = this.findByShape(groupToMove)
})