我想将整个组从中心红色方框中拖出,(请参阅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();
答案 0 :(得分:0)
我建议制作红色矩形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();
});