前言

Fabric.js是一个简化HTML5 canvas开发的js库，与原生的canvas相比，Fabric.js语法更为简洁，还提供了很多交互式api。

Canvas对象

在使用Fabric.js时需要一个canvas标签并通过Ref来引用，创建一个fabric.Canvas对象。Canvas对象可以对画布进行配置，如设置背景、大小、是否可操作等，然后通过api可以直接操作画布上的元素

const canvasRef = useRef<HTMLCanvasElement|null>(null);

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

	const rect = new fabric.Rect();
	canvas.add(rect); // 添加对象
	canvas.item(0); ///获取之前添加的fabric.Rect(第一个对象)
	canvas.getObjects(); ///获取画布上的所有对象(rect将是第一个也是唯一一个)
	canvas.remove(rect); ///删除之前添加的对象删除

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

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

元素Object对象

画布上所有元素都有一个Object基类，具体有Image图片、Circle圆、Line线、Rect矩形、Path路径等等，每个元素对象的坐标点默认是左上角，属性left和top对应x轴y轴，其中图片Image对象因为图片加载是异步的，所以后续操作在回调中处理

fabric.Image.fromURL('my_image.png',
		(oImg) => {
// scale image down, and flip it, before adding it onto canvas
		oImg.scale(0.5).set('flipX, true);
		canvas.add(oImg);},{
		selectable: false // 不可操作
});


const circle =  new fabric.Circle({ //圆形
	radius: 2,
	left: left,
	top: top,
	originX: 'center', // 坐标点在元素中心
	originY: 'center',
	fill: rgba(0,200,0,0.8), 
	strokeWidth: 1,
	stroke: rgba(255,0,0,0.8),
	selectable: false // 不可操作
});

canvas.add(cricle);

Event事件

canvas对象以及元素对象都可以关联事件，常用的的有mouse:move、mouse:down等等，下图是官网文档列出来的事件

下面是实现右键点击事件的例子，从官网的图上可以看到没有专门的右击事件，其实是在mouse:down里面，入参有一个button的属性，1代表左键，2代表中键，3代表右键，而且canvas有个fireRightClick属性是允许右键需要设置一下

const canvasRef = useRef<HTMLCanvasElement|null>(null);

    useEffect(() => {
        const canvas = new fabric.Canvas(canvasRef.current, {
            backgroundColor: '#e5e5e5',
            width: 768,
            height: 576,
            fireRightClick: true, //启用右键点击
            stopContextMenu: true, //禁用右键菜单
        });

      canvas.on('mouse:down', (handler) => {
            const {button, pointer} = handler;

            // 左键点击
            if (button == 1) {
              // 定义一个文本元素
                let text = new fabric.Text("+", {
                    originX: 'center', // 坐标点在元素中心
                    originY: 'center',
                    left: pointer?.x, // 点击的坐标
                    top: pointer?.y,
                    hoverCursor: 'pointer',// 鼠标移入手势
                });
              // 添加元素
                fabricCanvas.add(text);
            }

            // 右键点击
            if (button == 3 && handler.target) {
              // 删除元素
                fabricCanvas.remove(handler.target);
            }
        });
      
        return () => {
            canvas.dispose();
        }
    }, [canvasRef]);

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

Group组

使用Group可以将任何元素对象进行组合，把它们变成一个单体进行操作

const circle = new fabric.Circle({
  radius: 100,
  fill: '#eef',
  scaleY: 0.5,
  originX: 'center',
  originY: 'center'
});

const text = new fabric.Text('hello world', {
  fontSize: 30,
  originX: 'center',
  originY: 'center'
});

const group = new fabric.Group([ circle, text ], {
  left: 150,
  top: 100,
  angle: -10
});

group.item(0).set('fill', 'red');
group.item(1).set({
  text: 'trololo',
  fill: 'white'
});

canvas.add(group);

参考文章

https://blog.csdn.net/qq_40407998/article/details/108600297