Fabric.js 实现灵活的数据标注

Fabric.js 介绍

Fabric.js 是一款开源的JavaScript库，可以方便地创建交互式动画的canvas。它支持 HTML5 画布，允许您创建各种图形形状、图像、文本等对象并对其进行交互操作，包括拖动、缩放、旋转等。

Fabric.js 实现数据标注

环境准备

• 安装 Node.js 和 npm（用于管理项目中的 JavaScript 包）
• 安装 Fabric.js 库：npm install fabric
• 创建一个 HTML 文件（例如 index.html）并添加 Fabric.js 脚本：

<script src="fabric.js"></script>

创建画布

const canvas = new fabric.Canvas('myCanvas');

添加背景图

fabric.Image.fromURL('background.jpg', (img) => {
  canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
});

创建默认矩形

const rect = new fabric.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  opacity: 0.5
});
canvas.add(rect);

添加放大缩小功能

// 放大
canvas.on('mouse:wheel', (e) => {
  const delta = e.e.deltaY;
  const zoom = canvas.getZoom();
  canvas.zoomToPoint(zoom + delta * 0.01, e.pointer);
});

// 缩小
canvas.on('mouse:dblclick', (e) => {
  const zoom = canvas.getZoom();
  canvas.zoomToPoint(zoom - 0.1, e.pointer);
});

删除对象

canvas.on('object:selected', (e) => {
  const activeObject = e.target;
  canvas.remove(activeObject);
});

优势

快速高效

Fabric.js 的数据标注功能非常高效。得益于 Fabric.js 对交互操作的支持，用户可以快速创建和编辑标注框，而无需编写复杂的代码。

灵活多样

Fabric.js 允许用户创建各种形状的标注框，包括矩形、圆形、多边形等。用户还可以根据需要调整标注框的大小、位置和颜色。

易于扩展

Fabric.js 是一个高度可扩展的库。用户可以轻松地扩展 Fabric.js 的功能以满足自己的具体需求。例如，用户可以添加自定义事件处理程序或创建新的交互控件。

结语

Fabric.js 为数据标注提供了灵活、强大的解决方案。通过 Fabric.js，用户可以快速、高效地创建和编辑标注框，并轻松地扩展其功能以满足自己的需求。如果您需要对图像进行数据标注，那么 Fabric.js 是一个非常不错的选择。