react-konva dragBound 一个可缩放的舞台

Question

我正在尝试使用 react-konva 制作一个应用程序，其中图像覆盖整个舞台并且舞台是可拖动和可缩放的。所以我正在寻找一种将拖动绑定到图像边缘的方法。

我查看了演示并在我的代码中添加了一个 dragBoundFunc，但使用此代码我只能在顶部和左侧边缘拖动我的舞台。

演示：https://codesandbox.io/s/tender-chatterjee-ih31j

Answer 1

这可能有效：

const { stageWidth, stageHeight, stageScale } = this.state;

const x = Math.min(0, Math.max(pos.x, stageWidth * (1 - stageScale)));
const y = Math.min(0, Math.max(pos.y, stageHeight* (1 - stageScale)));

return {
      x, y
};

此外，您可能需要更新缩放函数以调用绑定函数。

演示：https://codesandbox.io/s/react-konva-dragbound-for-stage-ne71c?file=/src/Demo.jsx

react-konva dragBound 一个可缩放的舞台

react-konva dragBound a zoomable stage

reactjs

konvajs

react-konva