sg-labeler-vue2 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/24fb23bb518c44e106570789bdf4a9c0.png +0 -0
- package/lib/sg-labeler.js +3197 -0
- package/lib/style.css +1 -0
- package/package.json +11 -0
- package/readme.md +154 -0
package/lib/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.container[data-v-d3420bfc]{position:relative;margin:0;padding:0}
|
package/package.json
ADDED
package/readme.md
ADDED
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
sg-labeler-vue2
|
|
2
|
+
|
|
3
|
+
## 版本更新
|
|
4
|
+
|
|
5
|
+
##### 1.0.0 初版发布，基础的图片展示、切换，操作交互，标注绘制，数据交互等
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## API
|
|
9
|
+
|
|
10
|
+
### props
|
|
11
|
+
|
|
12
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
13
|
+
| ------------------- | ------------------------------------------------ | ------- | --------- |
|
|
14
|
+
| src | 图片资源路径 | String | null |
|
|
15
|
+
| mode | 交互模式('edit' -> 编辑模式, 'view' -> 浏览模式) | String | 'edit' |
|
|
16
|
+
| width | 画布宽 | Number | null |
|
|
17
|
+
| height | 画布高 | Number | null |
|
|
18
|
+
| lineColor | 标注线颜色 | String | #3e3e3e |
|
|
19
|
+
| lineWidth | 标注线宽 | Number | 2 |
|
|
20
|
+
| fillColor | 标注填充色 | String | #cccccc66 |
|
|
21
|
+
| fontColor | 文字颜色 | String | #333 |
|
|
22
|
+
| fontSize | 文字大小 | Number | 40 |
|
|
23
|
+
| pointRadius | 点半径 | Number | 10 |
|
|
24
|
+
| pointZoom | 点是否随画布缩放而缩放 | Boolean | true |
|
|
25
|
+
| pointLineColor | 点边线颜色 | String | #3e3e3e |
|
|
26
|
+
| pointLineWidth | 点边线宽度 | Number | 2 |
|
|
27
|
+
| pointFillColor | 点填充颜色 | String | #333 |
|
|
28
|
+
| pointCrosshair | 点是否开启准心 | Boolean | false |
|
|
29
|
+
| pointCrosshairWidth | 点准心宽度 | Number | 1 |
|
|
30
|
+
| pointCrosshairColor | 点准心颜色 | String | #333 |
|
|
31
|
+
| showDeleteIcon | 是否显示图形删除按钮 | Boolean | true |
|
|
32
|
+
| label | 标注标签名称 | String | null |
|
|
33
|
+
| description | 标注描述 | String | null |
|
|
34
|
+
| bgColor | 组件背景色 | String | #f5f5f5 |
|
|
35
|
+
| showHelpLines | 是否显示绘制辅助线 | Boolean | false |
|
|
36
|
+
|
|
37
|
+
### methods
|
|
38
|
+
|
|
39
|
+
| 方法名 | 说明 | 返回 | 参数 |
|
|
40
|
+
| --------------- | ----------------------------------------------- | ---------------- | ----------------- |
|
|
41
|
+
| startDraw | 开启绘制，参数 type 支持参考 [draw type](#jump) | -- | (type:String) |
|
|
42
|
+
| stopDraw | 停止绘制 | -- | -- |
|
|
43
|
+
| clearDraw | 清除当前画布中所有的标注数据 | -- | -- |
|
|
44
|
+
| clearDrawById | 清除指定 id 的标注数据 | -- | (id:String) |
|
|
45
|
+
| undo | 撤销上一步绘制的标注操作 | -- | -- |
|
|
46
|
+
| redo | 操作回退（在有已撤销操作时有效） | -- | -- |
|
|
47
|
+
| getData | 获取指定 id 的标注数据 | labelData:Object | (id:String) |
|
|
48
|
+
| getDataByLabel | 获取当前画布中包含指定标签的标注数据 | labelData:Array | (label:String) |
|
|
49
|
+
| getAllData | 获取当前画布中所有的标注数据 | labelData:Array | -- |
|
|
50
|
+
| setData | 向当前画布中设置标注数据（会清空已有标注数据） | -- | (labelData:Array) |
|
|
51
|
+
| addData | 向画布中添加标注数据 | -- | (labelData:Array) |
|
|
52
|
+
| getImageInfo | 获取当前加载的图片信息，包括高宽缩放比等 | info:Object | -- |
|
|
53
|
+
| deleteShapeById | 根据 id 删除形状 | -- | id:String |
|
|
54
|
+
|
|
55
|
+
#### <span id="jump">draw type</span>
|
|
56
|
+
|
|
57
|
+
| 绘制类型 | 说明 |
|
|
58
|
+
| --------- | ---------- |
|
|
59
|
+
| free | 自由绘制 |
|
|
60
|
+
| line | 绘制线 |
|
|
61
|
+
| circle | 绘制圆 |
|
|
62
|
+
| rectangle | 绘制矩形 |
|
|
63
|
+
| triangle | 绘制三角形 |
|
|
64
|
+
| textbox | 添加文字 |
|
|
65
|
+
| polygon | 绘制多边形 |
|
|
66
|
+
| point | 绘制点 |
|
|
67
|
+
|
|
68
|
+
### events
|
|
69
|
+
|
|
70
|
+
| 事件名 | 说明 | 返回参数 | 参数说明 |
|
|
71
|
+
| ------------- | ------------------ | ------------ | --------------------------- |
|
|
72
|
+
| onImageLoad | 图片加载成功时回调 | info:Object | info 为图片信息，包括高宽等 |
|
|
73
|
+
| onShapeDraw | 标注绘制成功时回调 | shape:Object | shape 为绘制的标注对象 |
|
|
74
|
+
| onShapeDelete | 标注删除时回调 | shape:Object | shape 为被删除的标注对象 |
|
|
75
|
+
| onShapeSelect | 标注被选择时回调 | shape:Object | shape 为被选择的标注对象 |
|
|
76
|
+
| fireShapeDrag | 标注移动完成后回调 | shape:Object | shape 为被移动的标注对象 |
|
|
77
|
+
|
|
78
|
+
## data (shape data)
|
|
79
|
+
|
|
80
|
+
### base (Object)
|
|
81
|
+
|
|
82
|
+
| 属性 | 说明 | 类型 | 示例 |
|
|
83
|
+
| ----------- | -------------------- | ------ | -------------------------------------- |
|
|
84
|
+
| id | 标注的唯一 id | String | '29d4a723-1dde-ad63-adf5-1059300642ad' |
|
|
85
|
+
| label | 标注的标签 | String | 'label' |
|
|
86
|
+
| description | 标注的描述 | String | 'description' |
|
|
87
|
+
| lineColor | 标注的线颜色 | String | '#3e3e3e' |
|
|
88
|
+
| lineWidth | 标注的线宽 | Number | 2 |
|
|
89
|
+
| fillColor | 标注的填充色 | String | '#3e3e3e' |
|
|
90
|
+
| type | 标注的类型 | String | 'free' |
|
|
91
|
+
| top | 标注距图片上边缘距离 | Number | 69.098 |
|
|
92
|
+
| left | 标注距图片左边缘距离 | Number | 658.998 |
|
|
93
|
+
|
|
94
|
+
### free extends base (Object)
|
|
95
|
+
|
|
96
|
+
| 属性 | 说明 | 类型 | 示例 |
|
|
97
|
+
| ------ | ---------------------- | ------ | -------------------------------------------------------------------------------------------------------------------- |
|
|
98
|
+
| 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] ] |
|
|
99
|
+
| scaleX | 标注的横轴缩放比 | Number | 1 |
|
|
100
|
+
| scaleY | 标注的纵轴缩放比 | Number | 1 |
|
|
101
|
+
|
|
102
|
+
### line extends base (Object)
|
|
103
|
+
|
|
104
|
+
| 属性 | 说明 | 类型 | 示例 |
|
|
105
|
+
| ------ | -------------------- | ------ | ----------------------------------------------------------- |
|
|
106
|
+
| points | 标注的点数据（端点） | Array | [ { "x": 148.8, "y": 91.17 }, { "x": 170.5, "y": 111.40 } ] |
|
|
107
|
+
| scaleX | x 轴方向缩放系数 | Number | 1 |
|
|
108
|
+
| scaleY | y 轴方向缩放系数 | Number | 1 |
|
|
109
|
+
|
|
110
|
+
### circle extends base (Object)
|
|
111
|
+
|
|
112
|
+
| 属性 | 说明 | 类型 | 示例 |
|
|
113
|
+
| ------ | -------------------- | ------ | ---------------------------- |
|
|
114
|
+
| points | 标注的点数据（圆心） | Array | [{ "x": 158.95, "y": 98.4 }] |
|
|
115
|
+
| radius | 标注的半径 | Number | 14.4 |
|
|
116
|
+
| scaleX | x 轴方向缩放系数 | Number | 1 |
|
|
117
|
+
| scaleY | y 轴方向缩放系数 | Number | 1 |
|
|
118
|
+
|
|
119
|
+
### rectangle extends base (Object)
|
|
120
|
+
|
|
121
|
+
| 属性 | 说明 | 类型 | 示例 |
|
|
122
|
+
| ------ | -------------------- | ----- | -------------------------------------------------------------------------------------------------------------------- |
|
|
123
|
+
| 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} ] |
|
|
124
|
+
|
|
125
|
+
### triangle extends base (Object)
|
|
126
|
+
|
|
127
|
+
| 属性 | 说明 | 类型 | 示例 |
|
|
128
|
+
| ------ | ---------------------------- | ----- | -------------------------------------------------------------------------------------------------------------------- |
|
|
129
|
+
| 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} ] |
|
|
130
|
+
|
|
131
|
+
### textbox extends base (Object)
|
|
132
|
+
|
|
133
|
+
| 属性 | 说明 | 类型 | 示例 |
|
|
134
|
+
| -------- | ---------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------- |
|
|
135
|
+
| 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} ] |
|
|
136
|
+
| text | 文字内容 | String | 'test' |
|
|
137
|
+
| fontSize | 文字大小 | Number | 40 |
|
|
138
|
+
| scaleX | x 轴方向缩放系数 | Number | 1 |
|
|
139
|
+
| scaleY | y 轴方向缩放系数 | Number | 1 |
|
|
140
|
+
|
|
141
|
+
### polygon extends base (Object)
|
|
142
|
+
|
|
143
|
+
| 属性 | 说明 | 类型 | 示例 |
|
|
144
|
+
| ------ | -------------------- | ----- | -------------------------------------------------------------------------------------------- |
|
|
145
|
+
| points | 标注的点数据（顶点） | Array | [ { "x": 148.835, "y": 62.27 }, { "x": 130.05, "y": 118.63 }, { "x": 161.84, "y": 108.51 } ] |
|
|
146
|
+
|
|
147
|
+
### point extends base (Object)
|
|
148
|
+
|
|
149
|
+
| 属性 | 说明 | 类型 | 示例 |
|
|
150
|
+
| ------ | ---------------------- | ------ | ---------------------------- |
|
|
151
|
+
| points | 标注的点数据（点中心） | Array | [{ "x": 158.95, "y": 98.4 }] |
|
|
152
|
+
| radius | 标注的半径 | Number | 14.4 |
|
|
153
|
+
| scaleX | x 轴方向缩放系数 | Number | 1 |
|
|
154
|
+
| scaleY | y 轴方向缩放系数 | Number | 1 |
|