Fabric.js 实现数据标注

创建基础项目

为了方便演示，我在初始化画布的时：

1.添加一个背景图，该背景图的尺寸和初始化的画布一样大。
2.默认渲染一个矩形。
3.右侧可以放大缩小画布以及删除选中矩形。
4.点击左侧可以修改标签内容。

-----------------------------------------------------------------------------------------------------------------------------------------------

---

相关API

1.删除元素的2种方法：

• canvas.remove(...object)
• new fabric.Control 绑定控制器删除

2.更新标签内容：

• 获取选中的矩形框点击标签更新。
• 选中标签后画布上绘制。

3.搜索框支持本地模糊匹配标签。4.isOff字段在代码中起到判断是否绘制的作用，fabric.Object.prototype.selectable = false 在绘制时关闭选中功能前提是未选中状态。封装myFabric类

/* eslint-disable import/no-extraneous-dependencies */
import { fabric } from 'fabric';

// 删除img
const deleteIcon ="data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C<img src="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"" style="margin: auto" />
const deleteIconImg = document.createElement('img');
deleteIconImg.src = deleteIcon;

class myFabric {/** * 构造函数 * @param {object} params 构造函数参数 */constructor(params) {this.canvas = null; // 画布对象this.isOff = true; // 是否开启画画模式this.downPoint = null; // 按下鼠标时的坐标this.upPoint = null; // 松开鼠标时的坐标this.label = '';this.change = null;this.initCanvas(params);}/** * 初始化画布 * @param {object} params{ imgUrl, data } 图片路径，标注数据 */initCanvas(params) {const { imgUrl, data, change } = params;this.change = change;const img = new Image();img.src = imgUrl;img.onload = () => {this.canvas = new fabric.Canvas('canvas');