sg-labeler-vue2

版本更新

1.0.0 初版发布，基础的图片展示、切换，操作交互，标注绘制，数据交互等

API

props

| 属性 | 说明 | 类型 | 默认值 | | ------------------- | ------------------------------------------------ | ------- | --------- | | src | 图片资源路径 | String | null | | mode | 交互模式('edit' -> 编辑模式, 'view' -> 浏览模式) | String | 'edit' | | width | 画布宽 | Number | null | | height | 画布高 | Number | null | | lineColor | 标注线颜色 | String | #3e3e3e | | lineWidth | 标注线宽 | Number | 2 | | fillColor | 标注填充色 | String | #cccccc66 | | fontColor | 文字颜色 | String | #333 | | fontSize | 文字大小 | Number | 40 | | pointRadius | 点半径 | Number | 10 | | pointZoom | 点是否随画布缩放而缩放 | Boolean | true | | pointLineColor | 点边线颜色 | String | #3e3e3e | | pointLineWidth | 点边线宽度 | Number | 2 | | pointFillColor | 点填充颜色 | String | #333 | | pointCrosshair | 点是否开启准心 | Boolean | false | | pointCrosshairWidth | 点准心宽度 | Number | 1 | | pointCrosshairColor | 点准心颜色 | String | #333 | | showDeleteIcon | 是否显示图形删除按钮 | Boolean | true | | label | 标注标签名称 | String | null | | description | 标注描述 | String | null | | bgColor | 组件背景色 | String | #f5f5f5 | | showHelpLines | 是否显示绘制辅助线 | Boolean | false |

methods

| 方法名 | 说明 | 返回 | 参数 | | --------------- | ----------------------------------------------- | ---------------- | ----------------- | | startDraw | 开启绘制，参数 type 支持参考 draw type | -- | (type:String) | | stopDraw | 停止绘制 | -- | -- | | clearDraw | 清除当前画布中所有的标注数据 | -- | -- | | clearDrawById | 清除指定 id 的标注数据 | -- | (id:String) | | undo | 撤销上一步绘制的标注操作 | -- | -- | | redo | 操作回退（在有已撤销操作时有效） | -- | -- | | getData | 获取指定 id 的标注数据 | labelData:Object | (id:String) | | getDataByLabel | 获取当前画布中包含指定标签的标注数据 | labelData:Array | (label:String) | | getAllData | 获取当前画布中所有的标注数据 | labelData:Array | -- | | setData | 向当前画布中设置标注数据（会清空已有标注数据） | -- | (labelData:Array) | | addData | 向画布中添加标注数据 | -- | (labelData:Array) | | getImageInfo | 获取当前加载的图片信息，包括高宽缩放比等 | info:Object | -- | | deleteShapeById | 根据 id 删除形状 | -- | id:String |

draw type

| 绘制类型 | 说明 | | --------- | ---------- | | free | 自由绘制 | | line | 绘制线 | | circle | 绘制圆 | | rectangle | 绘制矩形 | | triangle | 绘制三角形 | | textbox | 添加文字 | | polygon | 绘制多边形 | | point | 绘制点 |

events

| 事件名 | 说明 | 返回参数 | 参数说明 | | ------------- | ------------------ | ------------ | --------------------------- | | onImageLoad | 图片加载成功时回调 | info:Object | info 为图片信息，包括高宽等 | | onShapeDraw | 标注绘制成功时回调 | shape:Object | shape 为绘制的标注对象 | | onShapeDelete | 标注删除时回调 | shape:Object | shape 为被删除的标注对象 | | onShapeSelect | 标注被选择时回调 | shape:Object | shape 为被选择的标注对象 | | fireShapeDrag | 标注移动完成后回调 | shape:Object | shape 为被移动的标注对象 |

data (shape data)

base (Object)

| 属性 | 说明 | 类型 | 示例 | | ----------- | -------------------- | ------ | -------------------------------------- | | id | 标注的唯一 id | String | '29d4a723-1dde-ad63-adf5-1059300642ad' | | label | 标注的标签 | String | 'label' | | description | 标注的描述 | String | 'description' | | lineColor | 标注的线颜色 | String | '#3e3e3e' | | lineWidth | 标注的线宽 | Number | 2 | | fillColor | 标注的填充色 | String | '#3e3e3e' | | type | 标注的类型 | String | 'free' | | top | 标注距图片上边缘距离 | Number | 69.098 | | left | 标注距图片左边缘距离 | Number | 658.998 |

free extends base (Object)

| 属性 | 说明 | 类型 | 示例 | | ------ | ---------------------- | ------ | -------------------------------------------------------------------------------------------------------------------- | | points | 标注的点数据（路径点） | Array | [ ["M", 956.5, 102.7], ["Q", 956.5, 102.7, 955.8, 102.7], [ "Q", 955.1, 102.7, 954.4, 102.0 ], ["L", 953.6, 101.2] ] | | scaleX | 标注的横轴缩放比 | Number | 1 | | scaleY | 标注的纵轴缩放比 | Number | 1 |

line extends base (Object)

| 属性 | 说明 | 类型 | 示例 | | ------ | -------------------- | ------ | ----------------------------------------------------------- | | points | 标注的点数据（端点） | Array | [ { "x": 148.8, "y": 91.17 }, { "x": 170.5, "y": 111.40 } ] | | scaleX | x 轴方向缩放系数 | Number | 1 | | scaleY | y 轴方向缩放系数 | Number | 1 |

circle extends base (Object)

| 属性 | 说明 | 类型 | 示例 | | ------ | -------------------- | ------ | ---------------------------- | | points | 标注的点数据（圆心） | Array | [{ "x": 158.95, "y": 98.4 }] | | radius | 标注的半径 | Number | 14.4 | | scaleX | x 轴方向缩放系数 | Number | 1 | | scaleY | y 轴方向缩放系数 | Number | 1 |

rectangle extends base (Object)

| 属性 | 说明 | 类型 | 示例 | | ------ | -------------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | | points | 标注的点数据（顶点） | Array | [ { "x": 124.27, "y": 104.1 }, { "x": 163.28, "y": 104.1 }, { "x": 124.27, "y": 81.06}, { "x": 163.28, "y": 81.06} ] |

triangle extends base (Object)

| 属性 | 说明 | 类型 | 示例 | | ------ | ---------------------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | | points | 标注的点数据（外包矩形顶点） | Array | [ { "x": 124.27, "y": 104.1 }, { "x": 163.28, "y": 104.1 }, { "x": 124.27, "y": 81.06}, { "x": 163.28, "y": 81.06} ] |

textbox extends base (Object)

| 属性 | 说明 | 类型 | 示例 | | -------- | ---------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------- | | points | 标注的点数据（外包矩形顶点） | Array | [ { "x": 124.27, "y": 104.1 }, { "x": 163.28, "y": 104.1 }, { "x": 124.27, "y": 81.06}, { "x": 163.28, "y": 81.06} ] | | text | 文字内容 | String | 'test' | | fontSize | 文字大小 | Number | 40 | | scaleX | x 轴方向缩放系数 | Number | 1 | | scaleY | y 轴方向缩放系数 | Number | 1 |

polygon extends base (Object)

| 属性 | 说明 | 类型 | 示例 | | ------ | -------------------- | ----- | -------------------------------------------------------------------------------------------- | | points | 标注的点数据（顶点） | Array | [ { "x": 148.835, "y": 62.27 }, { "x": 130.05, "y": 118.63 }, { "x": 161.84, "y": 108.51 } ] |

point extends base (Object)

| 属性 | 说明 | 类型 | 示例 | | ------ | ---------------------- | ------ | ---------------------------- | | points | 标注的点数据（点中心） | Array | [{ "x": 158.95, "y": 98.4 }] | | radius | 标注的半径 | Number | 14.4 | | scaleX | x 轴方向缩放系数 | Number | 1 | | scaleY | y 轴方向缩放系数 | Number | 1 |