Reactjs 如何在Transformer矩形和React Konva中实现dragBounfunc、boundBoxFunc？

我试图用React Konva在图像上画一个矩形，并得到它的四个角的坐标。我已经非常精确地计算并返回了4个角的坐标，但问题是我仍然无法实现dragBoundFunc（拖动时绑定画布中的矩形）和boundBoxFunc（变换时绑定画布中的矩形）（旋转、缩放））

---

我能想到的一个解决方案是获得4个角的最小和最大X，Y坐标，然后如果画布的最小<0和最大>维度返回false。然而我仍然没有做到这一点，你可以检查我的沙箱。感谢您的帮助。

对于拖动功能，您可以执行以下操作：

shape.on('dragmove', () => {
  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)
});

shape.on（'dragmove'，（）=>{
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）
});

上面的想法只是限制节点的绝对位置

因为转换有点复杂，可能需要抛光才能顺利工作。但我试过：

让oldAttrs；
shape.on（'transform'，（）=>{
const box=shape.getClientRect（）；
const isOut=box.x<0 | | box.y<0 | | box.x+box.width>stage.width（）| | box.y+box.height>stage.height（）；
如果（isOut）{
shape.setAttrs（oldAttrs）；
}否则{
oldAttrs={…shape.getAttrs（）}；
}
});

所以，如果形状的位置超出可见视口，我们只需要将属性重置回以前的值

演示：