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
};

此外，您可能需要更新 zoom function 以調用綁定函數。

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