1.2.7 • Published 2 months ago

sg-labeler v1.2.7

Weekly downloads
-
License
-
Repository
-
Last release
2 months ago

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图片资源路径Stringnull
mode交互模式('edit' -> 编辑模式, 'view' -> 浏览模式)String'edit'
width画布宽Numbernull
height画布高Numbernull
lineColor标注线颜色String#3e3e3e
lineWidth标注线宽Number2
fillColor标注填充色String#cccccc66
fontColor文字颜色String#333
fontSize文字大小Number40
pointRadius点半径Number10
pointZoom点是否随画布缩放而缩放Booleantrue
pointLineColor点边线颜色String#3e3e3e
pointLineWidth点边线宽度Number2
pointFillColor点填充颜色String#333
pointCrosshair点是否开启准心Booleanfalse
pointCrosshairWidth点准心宽度Number1
pointCrosshairColor点准心颜色String#333
showDeleteIcon是否显示图形删除按钮Booleantrue
label标注标签名称Stringnull
description标注描述Stringnull
bgColor组件背景色String#f5f5f5
showHelpLines是否显示绘制辅助线Booleanfalse

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:Objectinfo 为图片信息,包括高宽等
onShapeDraw标注绘制成功时回调shape:Objectshape 为绘制的标注对象
onShapeDelete标注删除时回调shape:Objectshape 为被删除的标注对象
onShapeSelect标注被选择时回调shape:Objectshape 为被选择的标注对象
fireShapeDrag标注移动完成后回调shape:Objectshape 为被移动的标注对象

data (shape data)

base (Object)

属性说明类型示例
id标注的唯一 idString'29d4a723-1dde-ad63-adf5-1059300642ad'
label标注的标签String'label'
description标注的描述String'description'
lineColor标注的线颜色String'#3e3e3e'
lineWidth标注的线宽Number2
fillColor标注的填充色String'#3e3e3e'
type标注的类型String'free'
top标注距图片上边缘距离Number69.098
left标注距图片左边缘距离Number658.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标注的横轴缩放比Number1
scaleY标注的纵轴缩放比Number1

line extends base (Object)

属性说明类型示例
points标注的点数据(端点)Array { "x": 148.8, "y": 91.17 }, { "x": 170.5, "y": 111.40 }
scaleXx 轴方向缩放系数Number1
scaleYy 轴方向缩放系数Number1

circle extends base (Object)

属性说明类型示例
points标注的点数据(圆心)Array{ "x": 158.95, "y": 98.4 }
radius标注的半径Number14.4
scaleXx 轴方向缩放系数Number1
scaleYy 轴方向缩放系数Number1

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文字大小Number40
scaleXx 轴方向缩放系数Number1
scaleYy 轴方向缩放系数Number1

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标注的半径Number14.4
scaleXx 轴方向缩放系数Number1
scaleYy 轴方向缩放系数Number1
1.2.7

2 months ago

1.2.0

11 months ago

1.1.1

11 months ago

1.1.0

11 months ago

1.0.9

11 months ago

1.2.6

10 months ago

1.0.8

11 months ago

1.2.5

10 months ago

1.0.7

11 months ago

1.2.4

11 months ago

1.0.6

11 months ago

1.2.3

11 months ago

1.1.4

11 months ago

1.0.5

12 months ago

1.2.2

11 months ago

1.1.3

11 months ago

1.0.4

12 months ago

1.2.1

11 months ago

1.1.2

11 months ago

1.0.3

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago