reactjs - 如何将 Fabric.js 与 React 结合使用？

Question

我有一个通过 Fabric.js 大量使用 HTML5 Canvas 的应用程序。该应用程序是在 Angular 之上编写的1.x，我计划将其迁移到 React 。我的应用程序允许编写文本和绘制线条、矩形和椭圆。还可以移动、放大、缩小、选择、剪切、复制和粘贴一个或多个此类对象。还可以使用各种快捷方式缩放和平移 Canvas 。简而言之，我的应用程序充分利用了 Fabric.js。

我找不到太多关于如何将 Fabric.js 与 React 一起使用的信息，所以我关心的是 1. 是否可以在不进行重大修改的情况下进行，以及 2. 这是否有意义，或者我应该使用其他一些广泛的内容哪个 Canvas 库对 React 有更好的支持？

我能找到的 React+Fabric.js 的唯一示例是 react-komik ，但是它比我的应用程序简单得多。我主要关心的是 Fabric.js 的事件处理和 DOM 操作，以及它们对 React 的影响。

似乎还有一个用于 React 的 Canvas 库，名为 react-canvas ，但与Fabric.js相比似乎缺少很多功能。

在 React 应用程序中使用 Fabric.js 时，我必须考虑什么(关于 DOM 操作、事件处理等)？

Answer 1

我们的应用程序中也遇到了同样的问题，即如何在 React 中使用 Fabric.js。我的建议是将织物视为不受控制的组件。拥有整个应用程序可以与之通信并进行 Fabric 调用的 Fabric 实例，然后当发生任何更改时，使用 .toObject() 调用将整个 Fabric 状态放入 Redux 存储中。然后，您的 React 应用程序可以从全局 Redux 状态中读取结构状态，就像在任何普通 React 应用程序中一样。

我无法在 StackOverflow 代码编辑器中获得示例，但是 here is a JSFiddle example实现了我推荐的模式。