Question

我想将整个组从中心红色方框中拖出，（请参阅fiddle）

但限制从外部矩形拖动，同时保持内部矩形在组内的位置。可能是当鼠标按下时，我希望十字准线光标停在内部红色矩形的中心。任何帮助将不胜感激，谢谢。

const stage = new Konva.Stage({
   container: 'container',
   width: window.innerWidth,
   height: window.innerHeight
});
let layer = new Konva.Layer();
let group = new Konva.Group({
  draggable: true,
  height:50,
  width: 50
});

const containerRect = new Konva.Rect({
    width:50,
  height: 50,
  fill: 'yellow'
});

const rect = new Konva.Rect({
    x: 15,
  y: 15,
  width: 20,
  height: 20,
  fill: 'red'
});
stage.add(layer);
group.add(containerRect);
group.add(rect);
layer.add(group);
layer.draw();

Answer 1

我建议制作红色矩形draggable。开始拖动后，您可以停止拖动并开始拖动组：

rect.on('dragstart', () => {
  // stop rect dragging
  rect.stopDrag();

  // move group to the center
  const size = group.getClientRect();
  const pos = stage.getPointerPosition();

  group.setAttrs({
     x: pos.x - size.width / 2,
     y: pos.y - size.height / 2,
  });
  group.startDrag();
});

https://jsfiddle.net/0cdw3ya7/21/

如何仅从内部形状而不从组的其他区域拖动Konva JS中的组？

1 个答案: