fabric-annotator

An annotation tool based on fabric.js.

Installation

npm install fabric-annotator

Usage

初始化标注工具，需要提供一个 DOM 元素作为舞台。

const annotator = new Annotator({
  document.querySelector('.container'), // 容器元素
  {
    imageUrl: 'https://picsum.photos/1920/1080', // 图片地址
    showCrossLine: false, // 是否展示等分线
    vGridLineCount: 2, // 垂直等分线数量
    hGridLineCount: 4, // 水平等分线数量
    bgColor: '#B1B1B1', // 背景色
    lineWidth: 2, // 线条宽度
    annoInsideImage: true, // 在图像范围内标注
    imageRotation: 0, // 图片默认旋转角度
    events: {}, // 事件回调，见下方定义
  }
});

// events
{
  // 图形添加
  onObjectAdded?: (obj: fabric.Object, existing?: boolean) => void
  // 图形删除
  onObjectRemoved?: (obj: fabric.Object) => void
  // 图形被选中
  onObjectSelected?: (obj?: fabric.Object) => void
  // 图形被鼠标经过
  onObjectHover?: (obj?: fabric.Object) => void
  // 图形更新
  onObjectUpdated?: (obj?: fabric.Object) => void
  // 图形被双击
  onObjectDblClicked?: (obj?: fabric.Object) => void
  // 背景图添加
  onImageAdded?: (obj?: fabric.Image) => void
  // 创建选区
  onSelectionCreated?: (objs?: Array<fabric.Object>) => void
  // 清除选区
  onSelectionCleared?: (obj?: fabric.Object) => void
  // 撤销
  onWithdraw?: (objs?: Array<fabric.Object>) => void
  // 背景图旋转
  onImageRotated?: (deg: number) => void
}

API

setConfig(newConfig)

更新配置

getObjects()

获取全部标注图形，返回的是修改过的 fabricjs 对象

getObjectsByType(type)

获取指定类型的标注图形

dispose()

销毁实例

setAction(actionType, params)

设置当前动作

// 切换为绘制矩形
annotator.setAction('DRAW_RECT')

triggerEvent(eventType, params)

触发事件

// 删除指定对象
annotator.triggerEvent('DELETE', ['objId1', 'objId2'])

zoomIn(delta) / zoomOut(delta) / zoomReset()

缩放/重置缩放比例

rotate()

旋转图片

getThumbnailByObj(obj)

获取指定对象的缩略图

drawShape(shape)

命令式绘制图形，通常用于从数据还原舞台

annotator.drawShape('rect', {
  id: 'xxxxx',
  left: 0,
  top: 0,
  width: 100,
  height: 200
  data: {
    color: '#fff',
    label: 'Rect1',
  },
})

async toData()

获取导出的数据，位置信息以舞台的左上角为原点

导出的数据结构

// 以 rect 类型的数据为例，对常用字段做了解释
{
    "type": "rect", // 图形类型
    "version": "5.2.4",
    "originX": "left",  // 坐标 origin
    "originY": "top",
    "left": 1919.0595491802633, // 相对舞台左侧的距离
    "top": 2233.9368065006397,  // 相对舞台顶部的距离
    "width": 521.7659807486107, // 宽度
    "height": 750.0809753188391,  // 高度
    "fill": "transparent",
    "stroke": "#f00", // 描边颜色
    "strokeWidth": 6, // 描边宽度
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeDashOffset": 0,
    "strokeLineJoin": "miter",
    "strokeUniform": true,
    "strokeMiterLimit": 4,
    "scaleX": 1,  // 缩放比例
    "scaleY": 1,
    "angle": 0, // 角度
    "opacity": 1,
    "visible": true
}

// 如果是 polygon 多边形等不规则图形，则要用 points 来确定每个顶点的位置
{
  "type": "polygon",
  "version": "5.2.4",
  "originX": "left",
  "originY": "top",
  "width": 1891.4016802137157,
  "height": 962.0603813872067,
  "points": [
      {
          "x": 3011.5070713726673,
          "y": 3978.6903795248973
      },
      {
          "x": 2277.773660944933,
          "y": 4940.750760912104
      },
      {
          "x": 4169.175341158649,
          "y": 4859.220220116579
      },
      {
          "x": 4071.3442197682834,
          "y": 4076.527028479529
      }
  ],
  // ......
}