MujicaUI

Media · #342

ImageAnnotator 浅色主题渲染快照
浅色 · 渲染快照
ImageAnnotator 深色主题渲染快照
深色 · 渲染快照

342 ImageAnnotator 图片标注

用途

在图片上画矩形、箭头和文字标注,可选择、移动和删除,并导出标注数据。

最小示例

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 不能为空。

字段类型默认值含义
Heightfloat320(即 320)舞台高度。
Disabledboolfalse禁用绘制、选择和删除。
Labelstring"Annotations"舞台的无障碍名称。

状态

  • 工具:选择、矩形、箭头、文字,用分段控件切换。
  • 选中:虚线框加菱形标记,不只靠颜色。
  • 标注用暗红墨线加浅色描边,在任何图片上都看得清。

事件

Changed() 在新增、移动、改字或删除标注后为 true。

键盘操作

按键作用
[ / ]选中上一个 / 下一个标注
方向键移动选中的标注,每次图片宽度的 1%
Delete / Backspace删除选中的标注
Escape取消选择

限制

  • 文字工具:先在工具栏输入文字,再点击放置;选中文字标注时同一输入框可改字。
  • 标注不能缩放,只能移动;要改大小请删除后重画。
  • 文字的命中区域按每字 8 像素估算。