fabricjs-react实现笔刷绘图本文使用 `"fabric": "^6.6.5"`及`"fabricjs-rea

本文使用 "fabric": "^6.6.5"及"fabricjs-react": "^2.1.0"

Fabric.js 是一个功能强大的 HTML5 画布库，支持丰富的图形编辑功能。通过 fabricjs-react 库，我们可以轻松在 React 项目中集成 Fabric.js。

1. 环境搭建

安装依赖

在开始之前，请确保你已经安装了必要的依赖：

npm install fabricjs-react fabric

基础代码结构

创建一个 React 组件，初始化 Fabric.js 画布：

import React from 'react';
import { FabricJSCanvas, useFabricJSEditor } from 'fabricjs-react';
const App = () => {
  const { editor, onReady } = useFabricJSEditor();
  return (
    <div>
      <FabricJSCanvas className="sample-canvas" onReady={onReady} />
    </div>
  );
};
export default App;

参考www.npmjs.com/package/fab…；

可以直接在codesandbox.io/s/flamboyan…中尝试。

2. 启用绘图模式

设置isDrawingMode的值为true，启用绘图模式。

需要注意的是在设置笔刷的颜色和宽度之前，一定要先在canvas实例化一个笔刷赋值给editor.canvas.freeDrawingBrush。

editor.canvas.isDrawingMode = true;
editor.canvas.freeDrawingBrush = new PencilBrush(editor.canvas);
editor.canvas.freeDrawingBrush.color = "#000000";
editor.canvas.freeDrawingBrush.width = 10;

现在就可以在画布中使用笔刷绘制你想要的图案了。