Konvajs:如何更改文本组的位置
Konvajs: How to change position of group of texts
我正在使用 Konvajs,我有一组文本,我不想在 canvas 之外允许拖动组,我尝试使用 dragBoundFunc 解决了这个问题,但这没有帮助我,现在我只是尝试在 dragmove 期间更改组位置,但是 setPosition,setAbsloutePosition,没有任何东西允许我更改组位置
stage.on('dragmove', (e) => stageOnDragMove(e, layer));
const stageOnDragMove = (e: Konva.KonvaEventObject<any>, layer: Konva.Layer) => {
const selectionGroup = layer.findOne('#selection-group');
const transformer = layer.findOne<Konva.Transformer>('Transformer');
if (selectionGroup?.hasName('text-group')) {
const pos = selectionGroup.getClientRect({});
if (pos.x <= 0 || pos.y <= 0) {
selectionGroup.setAbsolutePosition({
x: 0,
y: 0
});
layer.draw();
}
}
transformer.attachTo(selectionGroup);
};
您可以使用此功能来限制拖放和调整大小功能以限制其边界:
shape.on('dragmove transform', () => {
const box = shape.getClientRect();
const absPos = shape.getAbsolutePosition();
const offsetX = box.x - absPos.x;
const offsetY = box.y - absPos.y;
const newAbsPos = {...absPos}
if (box.x < 0) {
newAbsPos.x = -offsetX;
}
if (box.y < 0) {
newAbsPos.y = -offsetY;
}
if (box.x + box.width > stage.width()) {
newAbsPos.x = stage.width() - box.width - offsetX;
}
if (box.y + box.height > stage.height()) {
newAbsPos.y = stage.height() - box.height - offsetY;
}
shape.setAbsolutePosition(newAbsPos)
})
我正在使用 Konvajs,我有一组文本,我不想在 canvas 之外允许拖动组,我尝试使用 dragBoundFunc 解决了这个问题,但这没有帮助我,现在我只是尝试在 dragmove 期间更改组位置,但是 setPosition,setAbsloutePosition,没有任何东西允许我更改组位置
stage.on('dragmove', (e) => stageOnDragMove(e, layer));
const stageOnDragMove = (e: Konva.KonvaEventObject<any>, layer: Konva.Layer) => {
const selectionGroup = layer.findOne('#selection-group');
const transformer = layer.findOne<Konva.Transformer>('Transformer');
if (selectionGroup?.hasName('text-group')) {
const pos = selectionGroup.getClientRect({});
if (pos.x <= 0 || pos.y <= 0) {
selectionGroup.setAbsolutePosition({
x: 0,
y: 0
});
layer.draw();
}
}
transformer.attachTo(selectionGroup);
};
您可以使用此功能来限制拖放和调整大小功能以限制其边界:
shape.on('dragmove transform', () => {
const box = shape.getClientRect();
const absPos = shape.getAbsolutePosition();
const offsetX = box.x - absPos.x;
const offsetY = box.y - absPos.y;
const newAbsPos = {...absPos}
if (box.x < 0) {
newAbsPos.x = -offsetX;
}
if (box.y < 0) {
newAbsPos.y = -offsetY;
}
if (box.x + box.width > stage.width()) {
newAbsPos.x = stage.width() - box.width - offsetX;
}
if (box.y + box.height > stage.height()) {
newAbsPos.y = stage.height() - box.height - offsetY;
}
shape.setAbsolutePosition(newAbsPos)
})