Media: components 341-360

docs/components/342-image-annotator.md

@@ -0,0 +1,59 @@
+# 342 ImageAnnotator 图片标注
+
+## 用途
+
+在图片上画矩形、箭头和文字标注，可选择、移动和删除，并导出标注数据。
+
+## 最小示例
+
+```go
+photo := ui.NewBitmap(examplePhoto)
+var notes []mujica.Annotation
+view := func(c *ui.Context) {
+	mujica.Use(c, mujica.Settings{})
+	if mujica.ImageAnnotator(c, photo, &notes, mujica.ImageAnnotatorOptions{}).Changed() {
+		data, _ := mujica.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 像素估算。