无法移动react.js中使用fabric.js创建的对象

Question

我在react应用程序中使用fabric.js库。
https://www.npmjs.com/package/fabric

我在画布上使用织物添加一个简单的黄色矩形。这个矩形以黄色正确地显示在画布上。没关系。但我也想移动(拖拽)它。我无法移动/拖动黄色矩形。请帮助。

import React, { useState, useEffect } from "react";
import { fabric } from "fabric";
import "./App.css";
const App = () => {
const [canvas, setCanvas] = useState("");
useEffect(() => {
setCanvas(initCanvas());
}, []);
const initCanvas = () =>
new fabric.Canvas("canvas", {
height: 800,
width: 800,
backgroundColor: "lightgray",
selection: true
});
const addRect = (canvi) => {
const rect = new fabric.Rect({
height: 280,
width: 200,
fill: "yellow",
selectable: true
});
canvi.add(rect);
canvi.renderAll();
};
return (
<div>
<h1>Fabric.js on React - fabric.Canvas('...')</h1>
<button onClick={() => addRect(canvas)}>Rectangle</button>
<canvas id="canvas" />
</div>
);
};
export default App;

https://aprilescobar.medium.com/part-1-fabric-js-on-react-fabric-canvas-e4094e4d0304

Answer 1

有同样的问题，对我来说，它是通过删除main中的strictmode标签来解决的。jsx干扰了Fabric.js -现在它可以完美地工作了<React.StrictMode> </React.StrictMode>