我如何在React中使用Fabric.js? [英] How can I use Fabric.js with React?

问题描述

我有一个通过 Fabric.js 使用大量HTML5画布的应用程序.该应用程序是在 Angular 1.x之上编写的，我正计划将其迁移到

I have an application using heavily HTML5 canvas via Fabric.js. The app is written on top of Angular 1.x, and I am planning to migrate it to React. My app allows writing text and drawing lines, rectangles, and ellipses. It is also possible to move, enlarge, shrink, select, cut, copy, and paste one or more of such objects. It is also possible to zoom and pan the canvas using various shortcuts. In short, my app utilizes Fabric.js to its full extent.

我找不到关于如何与React一起使用Fabric.js的更多信息，所以我担心的是:1.是否可以不进行重大修改，并且2.是否有意义，或者我应该使用其他扩展功能吗?画布库对React有更好的支持?

I couldn't find much information on how to use Fabric.js together with React, so my concern is that 1. is it possible without major modifications, and 2. does it make sense or should I instead use some other extensive canvas library that has better support for React?

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

The only example of React+Fabric.js I could find, was react-komik, which however is much more simpler than my app. My main concerns are the event processing and DOM manipulation of Fabric.js, and their effect on React.

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

There seems to be also a canvas library for React, called react-canvas, but it seems lacking a lot of features compared to Fabric.js.

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

What do I have to take into account (regarding DOM manipulation, event processing, etc.) when using Fabric.js in a React app?

推荐答案

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

We had this same issue in our app of how to use Fabric.js inside of react. My recommendation is to treat fabric as an uncontrolled component. Have fabric instance that your whole app can talk to and make fabric calls and then when anything changes use .toObject() call to put the whole fabric state into your Redux store. Then your React app can read fabric state from your global Redux state as you would do in any normal React app.

我无法在StackOverflow代码编辑器中使用示例，但是这是JSFiddle示例实现了我推荐的模式.

I can't get an example working in the StackOverflow code editor but here is a JSFiddle example that implements the pattern I am recommending.

这篇关于我如何在React中使用Fabric.js?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！