简介

Dash Picture Annotation是一个Dash组件包。

本组件包是对React项目React Picture Annotation的Dash移植版，用以提供针对图片的简易标记编辑器。

以下两图对比了原React项目和本项目的范例。由于本项目仅仅是原React组件的Dash封装，它们的效果可以视作是等价的。

React Picture Annotation	Dash Picture Annotation

相比于原项目，本项目还有以下新添加的特殊功能：

响应式尺寸: 标记器（annotator）的宽度会跟随其父网页元素的宽度自动调整。
Different modes: 选中某个标记（annotation）时，其编辑器可以设为文本框、或下拉菜单。
Data sanitized: 标记数据经过了简单清理。即使向标记器传入了格式不标准的数据，也能正常使用。
Anti-mistakes: 可以透过设置标记框大小的阈值、防止用户由于误操作而创建微小的标记。
Disabled: 可以透过一个二值量禁用标记器。
Specified colors: 针对某具有特定文字标注的标记，可以设置特定的标记颜色。不同的文字标注可以设置不同的颜色。
Dynamic colors: 不必专门为每种标注手动设置颜色，可以透过一个二值量、允许标记根据其文字标注的哈希量（hash code）自动计算其颜色。

Dash Picture Annotation的视频展示

透过以下视频展示，速览本项目的特性：

用法

以下签名展示了本组件的基本用途。

import dash_picture_annotation as dpa

dpa.DashPictureAnnotation(
    id="annotator",
    style={"height": "80vh"},
    data=default_data,  # Can be `None`
    image="/assets/test_image.svg",  # Can be `None`
    options=None,
)

其中data的类型标记为dpa.Annotations。其格式形如下例：

{
  "timestamp": 0,
  "data": [
    {
      "id": "N5fewQ",
      "mark": {
        "x": -224.45,
        "y": 62.76,
        "width": 125.53,
        "height": 125.53,
        "type": "RECT"
      },
      "comment": "has-a-type"
    },
    {
      "id": "ibJMdK",
      "mark": {
        "x": -36.15,
        "y": 62.76,
        "width": 125.53,
        "height": 125.53,
        "type": "RECT"
      }
    },
    {
      "id": "...",
      "...": "..."
    }
  ]
}