我有一个通过Fabric.js使用大量HTML5画布的应用程序.该应用程序是在Angular 1.x 之上编写的,我计划将其迁移到React.我的应用程序允许编写文本和绘制线条,矩形和椭圆.还可以移动,放大,缩小,选择,剪切,复制和粘贴一个或多个这样的对象.也可以使用各种快捷方式缩放和平移画布.简而言之,我的应用程序充分利用了Fabric.js.
我找不到关于如何将Fabric.js与React一起使用的大量信息,所以我关注的是1.它是否可能没有重大修改,2.它是否有意义,或者我应该使用其他广泛的画布库对React有更好的支持？
我能找到的React + Fabric.js的唯一例子是react-komik,然而它比我的应用程序简单得多.我主要关心的是Fabric.js的事件处理和DOM操作,以及它们对React的影响.
似乎还有一个React的画布库,名为react-canvas,但与Fabric.js相比,它似乎缺少很多功能.
在React应用程序中使用Fabric.js时,我需要考虑什么(关于DOM操作,事件处理等)？
ps 解决了我遇到的问题，但如果您有时间，我仍然想听听您对此和我的代码的看法:)
我只能在渲染完成后为该变量赋值，所以我假设我必须在 useEffect() 中声明该变量，并且不可能在全局范围内为其赋值（在任何渲染之前执行）。但我也想在另一个 useEffect() 中使用该变量，但我不能，因为它是在函数内部声明的，并且它不属于全局范围。另外，有两个 useEffect -s 正常吗？我需要获取画布的上下文，并保持该上下文一致（不会在每次 DOM 更新时获取新的上下文，因为当我没有将 [] 作为第一个 useEffect 的第二个参数时会发生这种情况）。另一个是随着状态的变化在那个独特的上下文中做事。是否有意义？我的代码：
import React, { useState, useRef, useEffect } from "react";
import { degreesToRadiansFlipped } from "./helpers/degreesToRadiansFlipped";
function Circle() {
let [degree, setDegree] = useState(0);
const canvas = useRef();
const inputField = useRef();
const coordinateX = Math.cos(degreesToRadiansFlipped(degree)) * 100 + 250;
const coordinateY = Math.sin(degreesToRadiansFlipped(degree)) * 100 + 250;
useEffect(() => {
const context = canvas.current.getContext("2d");
drawCircle(context, coordinateX, coordinateY);
return context;
/*return function cleanUp() {
context.clearRect(0, …我正在尝试通过在 React.js 应用程序中使用鼠标拖动一个区域来突出显示图像的区域，就像您在 Mac 或 Windows 上的表现一样。
我知道这最好在 Canvas 上完成，方法是将画布覆盖在图像上，然后捕捉鼠标事件并相应地绘制矩形，是否有一个好的库或其他方法可以做到这一点？因为编写原始代码来实现这一点似乎是在重新发明轮子。
提前致谢。
我想将 React 画布上的绘图作为 jpeg 图像文件下载到我的桌面，然后将其传递到 python 文件进行分类。有人可以指定一个代码来下载 React 画布绘图，或者建议更好的方法来实现这个想法吗？
clearCanvas({nativeEvent}) {
var image = this.canvas.toDataURL("image/jpeg");
nativeEvent.href=image;
this.ctx.save("C:/Users/PrishitaRay/Pictures/Myimage.jpeg");
this.ctx = this.canvas.getContext('2d');
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
该函数只是清除反应画布，而不先下载它。