时间戳

首页 > 解决方案 > react-konva dragBound 一个可缩放的舞台

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

问题描述

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

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

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

标签： reactjskonvajsreact-konva

解决方案

这可能有效：

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

推荐阅读