React项目中使用Fabric.js

介绍：

Fabric.js是一个强大且灵活的JavaScript HTML5 canvas库。它允许你通过一种友好且易于使用的方法创建和处理对象。以下是一些Fabric.js的主要特性：

1. 对象模型：Fabric.js有一个丰富的对象模型，允许你创建和操作各种类型的对象，如矩形，圆形，多边形，椭圆，文本等。
2. 可组合性：Fabric.js的对象可以组合在一起，以创建更复杂的图形。例如，你可以创建一个由多个矩形组成的矩形对象。
3. 变换：Fabric.js提供了对对象进行变换（旋转，缩放，移动）的功能。此外，它还支持坐标系统转换。
4. 事件：Fabric.js允许你侦听和响应各种事件，如对象创建，鼠标事件，触摸事件等。
5. 动画：Fabric.js支持各种动画效果，包括简单动画和复杂动画。
6. 交互：Fabric.js提供了强大的交互功能，允许你通过鼠标和触摸来操纵对象。
7. 序列化与反序列化：Fabric.js的对象可以被序列化为JSON字符串，然后再从JSON字符串反序列化回来。
8. HTML5 Canvas集成：Fabric.js可以直接与HTML5 Canvas元素集成，从而可以访问所有Canvas API的功能。

总的来说，Fabric.js是一个非常强大的库，用于创建和处理HTML5 canvas图形。它的友好性和易用性使得开发者可以快速上手并创建出复杂的图形和动画。

fabric官网：

Fabric.js Javascript Canvas Library

react中安装使用：

npm install  fabric

创建画布：

import React, { useEffect, useRef, useState } from 'react';
import { fabric } from 'fabric';

export default function App() {
  const canvasRef = useRef(null);
  const [canvas, setCanvas] = useState(null);
  return (
    <div>
      <canvas ref={canvasRef}></canvas>
    </div>
  );
}

 创建图形：

const rect = new fabric.Rect({
      left: 100,
      top: 50,
      fill: 'pink',
      width: 60,
      height: 60,
      strokeWidth: 5,
      hasControls: true,
      hasRotatingPoint: true,
      hasBorders: true,
      transparentCorners: true,
      perPixelTargetFind: true,
      selectable: true,
      lockMovementX: false,
      lockMovementY: false,
    });

    const circle = new fabric.Circle({
      left: 100,
      top: 100,
      fill: 'yellow',
      radius: 50,
    });
    newCanvas.add(circle);

导入图片：

fabric.Image.fromURL('images/logo192.png', function (oImg) {
      // scale image down, and flip it, before adding it onto canvas
      //缩小图像并翻转它
      oImg.scale(0.5).set('flipX', true);
      newCanvas.add(oImg);
    });

 全部代码：

import React, { useEffect, useRef, useState } from 'react';
import { fabric } from 'fabric';

export default function App() {
  const canvasRef = useRef(null);
  const [canvas, setCanvas] = useState(null);

  useEffect(() => {
    const newCanvas = new fabric.Canvas(canvasRef.current, {
      backgroundColor: '#fffffb',
      width: 768,
      height: 576,
    });

    setCanvas(newCanvas);

    const rect = new fabric.Rect({
      left: 100,
      top: 50,
      fill: 'pink',
      width: 60,
      height: 60,
      strokeWidth: 5,
      hasControls: true,
      hasRotatingPoint: true,
      hasBorders: true,
      transparentCorners: true,
      perPixelTargetFind: true,
      selectable: true,
      lockMovementX: false,
      lockMovementY: false,
    });

    const circle = new fabric.Circle({
      left: 100,
      top: 100,
      fill: 'yellow',
      radius: 50,
    });
    newCanvas.add(circle);
    newCanvas.add(rect);
    fabric.Image.fromURL('images/logo192.png', function (oImg) {
      // scale image down, and flip it, before adding it onto canvas
      //缩小图像并翻转它
      oImg.scale(0.5).set('flipX', true);
      newCanvas.add(oImg);
    });

    return () => {
      // newCanvas.dispose();
    };
  }, [canvasRef]);

  return (
    <div>
      <canvas ref={canvasRef}></canvas>
    </div>
  );
}