Konvajs:如何改变文本组的位置
提问于 2020-04-01 02:55:01
我正在使用Konvajs，我有一组文本，我不想让拖动组在画布之外，我尝试用dragBoundFunc解决这个问题，但是这对我没有帮助，现在我只是尝试在拖放过程中改变组的位置，但是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);
};
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-02 07:40:25
可以使用此函数限制拖放和调整大小功能，以限制其边界：
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)
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60969263
复制相关文章
腾讯云开发者
