Position Konvajs:如何改变文本组的位置

Position Konvajs:如何改变文本组的位置,position,grouping,konvajs,react-konva,konvajs-reactjs,Position,Grouping,Konvajs,React Konva,Konvajs Reactjs,我用的是Konvajs,我有一组文本,我不想把组拖到画布之外,我试着用dragBoundFunc解决了这个问题,但这对我没有帮助,现在我只是试着在拖动过程中改变组位置,但是setPosition,setAbsloutePosition,什么都不允许我改变组位置 stage.on('dragmove', (e) => stageOnDragMove(e, layer)); const stageOnDragMove = (e: Konva.KonvaEventObject<any>

我用的是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);
};
stage.on('dragmove',(e)=>stageOnDragMove(e,layer));
const stageOnDragMove=(e:Konva.KonvaEventObject,层:Konva.layer)=>{
const selectionGroup=layer.findOne(“#选择组”);
const transformer=layer.findOne('transformer');
if(selectionGroup?.hasName('text-group')){
const pos=selectionGroup.getClientRect({});

如果(pos.x您可以使用此功能限制拖放和调整功能大小以限制其边界:

shape.on('dragmove transform',()=>{
const box=shape.getClientRect();
const absPos=shape.getAbsolutePosition();
常量偏移量x=方框x-绝对位置x;
常数偏移量=方框y-绝对位置y;
常量newAbsPos={…absPos}
如果(方框x<0){
newAbsPos.x=-offsetX;
}
如果(框y<0){
newAbsPos.y=-offsetY;
}
如果(box.x+box.width>stage.width()){
newAbsPos.x=stage.width()-box.width-offsetX;
}
如果(box.y+box.height>stage.height()){
newAbsPos.y=stage.height()-box.height-offsetY;
}
形状.设置绝对位置(新ABSPOS)
})

演示:

形状可以,但我有问题,当我在组中添加文本时,请查看我的代码,我如何修复它?只需将唯一的组设置为可拖动即可。