跳到主要内容

范例：控制标记框尺寸

控制标记框尺寸的范例
控制标记框尺寸的范例

查看以下链接，以阅览使用控制标记框尺寸的范例。

size_control.py

该范例提供了以下功能：

  1. 一个基础的DashPictureAnnotation，允许：
    1. 透过拖拽的方式，创建、修改、或移除标记框。
    2. 使用文本输入框修改标记的文字标注。
  2. 每当标记数据改变时，数据的变化会反馈给标记器下方的文字。
  3. 配置了标记框所需要的最小宽度和高度值。若创建、或修改一个标记时，其宽度或高度小于指定的阈值，则对应的标记会被直接移除。

定义布局​

相比最小范例，此处主要的修改是，在组件定义时设置了size_minimal属性：

dpa.DashPictureAnnotation(
    id="annotator",
    style={"height": "80vh"},
    data=None,
    image="/assets/test_image.svg",
    options=None,
    clearable_dropdown=True,
    size_minimal=20,
)

该属性设计成用来控制标记框最小尺寸的工具。某些时候，用户有可能会由于错误地点击标记器，导致创建新的标记框，且该标记框满足宽高均为0（即width=0且height=0）。在此情况下，新建的标记既无实际意义、又无法被用户选中。相比令用户自行清理数据的方案，更好的做法当然是通过这样一个属性、来为标记框的最小宽度和高度设置限制。通过追加该属性，任何小于指定尺寸的标记框都会被直接移除。

提示

属性size_minimal也可以配置为形如下例的字典：

dpa.DashPictureAnnotation(
    ...
    size_minimal={"width": 20, "height": 20},
)

这允许用户分别为宽度和高度、设置不同的尺寸限制。