【fabricjs】 完成橡皮擦

需求：擦除图片上的某些区域；
原理：利用fabric中的自由绘画，绘画完成后，传给后端base64格式的图片

在fabric.js库中，可以自定义铅笔（free drawing）的颜色和粗细。创建画布后，可以使用以下方法设置铅笔颜色（stroke）和粗细（strokeWidth）：

// 初始对画布的交互
const init = () => {
  canvas = new fabric.Canvas(canvasRef.value, {
    preserveObjectStacking: true
  });
  // 禁用选择区域 隐藏那个用于选择的蓝色矩形框，并且会禁止在画布上的多选操作。注意，这并不会禁止单个对象的选取，单个对象依然可以被选取并操作
  canvas.selection = false;

// 给自由绘画的路径添加自定义字段
  canvas.on('path:created', (e: any) => {
    e.path.set({ type: DrawType.Path });
  });

  // 设置自由绘画的样式
  if (canvas.freeDrawingBrush) {
    canvas.freeDrawingBrush.color = '#fff'; // 设置绘画颜色
    canvas.freeDrawingBrush.width = 10; // 设置绘画线条宽度
  }
};

开始绘画 需要设置isDrawingMode为true

canvas.isDrawingMode = true; // 开始绘画模式

Fabric.js 提供了几种将画布对象转化为可传输数据的方式。最常见的是把画布转化为JSON对象，然后发送到后端。

// 你可以使用下列代码在路径创建后把画布转化为JSON对象
var jsonData = canvas.toJSON();

但是我这里用的是转成base64格式的图片，发送给后端

// 获取自由绘画的base64
const getBase64Url = () => {
  const tempCanvas = new fabric.Canvas(canvasRef.value, {
    isDrawingMode: true
  });
  // 否则放大浏览器比例有问题
  tempCanvas?.setWidth(canvas.width);
  tempCanvas?.setHeight(canvas.height);

  canvas.getObjects().forEach((item: any) => {
    const oClone = fabric.util.object.clone(item);
    tempCanvas.add(oClone);
  });

  const dataURL = tempCanvas.toDataURL();
  tempCanvas.dispose();
  return dataURL;
};




  // 在外层组件中
  const url = leftPhotoContentRef.value?.getBase64Url();
  await Pepper.post(`/api/map/map_info_eraser/${pathId}`, {
    base_64_str: url
  });

补充：Fabric.js在自由绘画模式下，会使用SVG的另一种命令，那就是二次贝塞尔曲线（Quadratic Bezier Curve），表示为"Q"。这是因为相比直线，这种类型的曲线可以更好地表示手写或绘制的路径。

我打印他的path对象输出的是：
[‘M’, 91.50894473515102, 360.046875] ： “M” 代表 “Move to”（移动到），移动到坐标 (91.50894473515102, 360.046875)，不画线，只移动起始点。
[‘Q’, 91.51394473515101, 360.046875, 92.01393555494354, 360.046875]： “Q"代表"Quadratic Bezier Curve”（二次贝塞尔曲线）。参数是：控制点 (91.51394473515101, 360.046875) ，结束点 (92.01393555494354, 360.046875)。
[‘Q’, 92.51392637473607, 360.046875, 93.51390801432112, 360.046875] ：同上，另一个二次贝塞尔曲线命令。控制点和结束点的坐标如数组指示。
[‘L’, 94.51888965390617, 360.046875] ： "L"代表 “Line to”（线到），画一条线到坐标 (94.51888965390617, 360.046875)。
二次贝塞尔曲线的特点是，它有一个控制点决定了曲线的大致方向和弯曲程度，使得手绘的路径看起来更加自然且连续。

官方demo