sg-labeler

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