使用 React 拼图矢量图形

Question

我正在尝试建立一个网站，允许用户上传图像，然后将图像分割成拼图块，然后以编程方式移动。我尝试使用 Paper JS 和 Fabric JS 来解决这个难题，但它们都与 React 组件不太兼容。除了这些之外还有其他替代方案吗？或者可以帮助我将 Paper/Fabric 与 React 集成的最佳实践？

Answer 1

除了 Paper.js 或 Fabric.js，您还可以使用：

1. Konva.js： Konva 是一个 2D 绘图库，可让您在 一种面向对象的方式，并以其兼容性而闻名 反应。您可以使用react-konva库，它是React包装器 康瓦。它非常适合复杂的图形并且表现良好 多个元素。
2. react-spring：虽然不是一个绘图库，但react-spring提供了一个 在动画中使用弹簧物理的方式（包括拖动 物品），这在处理移动您的物品时可能会派上用场 周围的拼图。

至于最佳实践：

• 要将任何外部命令式 API 添加到 React 中，您需要在 DOM 中创建 React 不应控制的区域。这可以通过使用 React 的 useRef 钩子创建引用来实现，并且仅在 useEffect 钩子中使用外部 API。

• 导入您需要的库在useEffect钩子中。这确保了仅在 DOM 准备好后才调用该库。

• 清理你的效果。如果第 3 方库在 DOM 中创建了副作用，请不要忘记在 useEffect 挂钩的返回函数中清除它。