Files
MujicaUI/docs/components/342-image-annotator.md
T

60 lines
1.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 342 ImageAnnotator 图片标注
## 用途
在图片上画矩形、箭头和文字标注,可选择、移动和删除,并导出标注数据。
## 最小示例
```go
photo := ui.NewBitmap(examplePhoto)
var notes []media.Annotation
view := func(c *ui.Context) {
core.Use(c, core.Settings{})
if media.ImageAnnotator(c, photo, &notes, media.ImageAnnotatorOptions{}).Changed() {
data, _ := media.ExportAnnotations(notes)
_ = data // save the JSON
}
}
ui.Render(view, 400, 300, 1)
```
## 参数
`func ImageAnnotator(c *ui.Context, src ui.ImageSource, notes *[]Annotation, opts ImageAnnotatorOptions) ChoiceResult`
`func ExportAnnotations(notes []Annotation) ([]byte, error)` 把标注写成 JSON(kind、x0、y0、x1、y1、text)。
`Annotation` 的坐标是图片像素;文字标注以 `From` 为左上角,`Text` 不能为空。
| 字段 | 类型 | 默认值 | 含义 |
| --- | --- | --- | --- |
| `Height` | `float32` | 0(即 320) | 舞台高度。 |
| `Disabled` | `bool` | false | 禁用绘制、选择和删除。 |
| `Label` | `string` | "Annotations" | 舞台的无障碍名称。 |
## 状态
- 工具:选择、矩形、箭头、文字,用分段控件切换。
- 选中:虚线框加菱形标记,不只靠颜色。
- 标注用暗红墨线加浅色描边,在任何图片上都看得清。
## 事件
`Changed()` 在新增、移动、改字或删除标注后为 true。
## 键盘操作
| 按键 | 作用 |
| --- | --- |
| [ / ] | 选中上一个 / 下一个标注 |
| 方向键 | 移动选中的标注,每次图片宽度的 1% |
| Delete / Backspace | 删除选中的标注 |
| Escape | 取消选择 |
## 限制
- 文字工具:先在工具栏输入文字,再点击放置;选中文字标注时同一输入框可改字。
- 标注不能缩放,只能移动;要改大小请删除后重画。
- 文字的命中区域按每字 8 像素估算。