sg-labeler

版本更新

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

1.0.1 解决点绘制会获取到两个相同标注对象的异常问题

1.0.2 扩展实现多边形标注的标签显示（标签位于最靠多边形左上的点）

1.0.3 禁止多边形平移拖动操作

1.0.4 根据 id 删除形状 添加形状移动完成后回调

1.0.5 解决设置点数据时，id 丢失问题

1.0.6 解决一个页面加载多个该控件时显示异常问题

1.0.7 解决不能给点形状设置颜色问题

1.0.8 修复绘制形状之后立马停止绘制，形状丢失问题

1.0.9 扩展实现点标注的标签显示（标签位于点的正中间）

1.1.0 优化点标注的标签显示（标签位于点的正上方）

1.1.1 优化点标注的标签显示

1.1.2 实现标注的显示与隐藏、是否可选中

1.1.3 setData 可实现标注的显示与隐藏

1.1.4 修复鼠标滚动图片偏移移动事件

1.1.5 增加 pointZoom 属性，默认 true，控制点是否随画布缩放而缩放

1.2.0 point 标注对象更新，增加了准心配置，开启准心时应将填充色的透明度设置为 1 以下，具体更新包括以下内容

• 点的绘制颜色填充分为边框颜色 pointLineColor 及填充颜色 pointFillColor -> 原版中，点没有填充色，整体颜色由边框颜色 lineColor 控制
• 点对象增加边框宽度配置，由 pointLineWidth 控制 -> 原版中，点无边框宽度
• 点对象增加准心配置，由 pointCrosshair 控制，默认值为 false -> 原版中，点无准心配置
• 点对象增加准心颜色配置，由 pointCrosshairColor 控制，默认为 #333 -> 原版中，点无准心颜色配置
• 点对象增加准心宽度配置，由 pointCrosshairWidth 控制，默认为 1 -> 原版中，点无准心宽度配置

1.2.1 point 标注对象的标签 label 颜色异常修复，颜色使用 point 对象的边框颜色 pointLineColor

1.2.2 point 标注对象在 setData 设置数据时未实现 1.2.0 版本的更新处理异常问题解决

1.2.3 解决 point 标注对象的标签在画布缩放之后显示异常的问题

5

1.2.4 解决 circle、rectangle、text 标注对象 resize 异常的问题（原因是这几个对象的绘制受到 scaleX & sclaeY 的控制，在返回结果中也对应增加了这两个属性）

1.2.5 增加鼠标滚动回调事件，返回图片信息（width,height,scaleX,scaleY）

1.2.6 point 标注对象的信息增加 x,y 的缩放尺寸信息，解决在不缩放点的模式下，缩放图片后重新设置点数据导致点的大小改变的问题

1.2.7 增加背景图拖动事件

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 |