范例：配置标记的颜色

配置标记颜色的范例

查看以下链接，以阅览设置标记颜色的范例。

colors.py

该范例提供了以下功能：

1. 一个基础的DashPictureAnnotation，允许：
   1. 透过拖拽的方式，创建、修改、或移除标记框。
   2. 使用文本输入框修改标记的文字标注。
2. 每当标记数据改变时，数据的变化会反馈给标记器下方的文字。
3. 三个控制按钮：
   • 切换默认色（Toggle default color）：用来在白色（white）与黑色（black）之间切换当前默认色。
   • 开关指定色（Toggle specific color）：用来开启、关闭针对某些特定文字标注设置的对应颜色。
   • 开关动态色（Toggle dynamic color）：用来开启、关闭动态颜色计算。注意自动计算的颜色只会与文字标注值相关。

定义布局

相比最小范例，此处还有三个额外的按钮。

(
    dpa.DashPictureAnnotation(...),
    html.Div(
        html.Button(
            children="Toggle default color",
            id="btn-default",
            style=styles["mr1"],
        ),
        html.Button(
            children="Toggle specific color",
            id="btn-specific",
            style=styles["mr1"],
        ),
        html.Button(
            children="Toggle dynamic color",
            id="btn-dynamic",
            style=styles["mr1"],
        ),
    ),
)

这些按钮用来触发与颜色配置相关的callback。相比最小范例，本例中DashPictureAnnotation的初始属性并不需要修改。

定义callback

第一个callback用来切换默认色。其读取之前配置的默认色，并在#000和#fff两值之间切换新的默认色。

@app.callback(
    Output("annotator", "style_annotation"),
    Input("btn-default", "n_clicks"),
    State("annotator", "style_annotation"),
    prevent_initial_call=True,
)
def toggle_default_color(n_clicks: Optional[int], style_annotation: Optional[str]):
    if n_clicks:
        if not isinstance(style_annotation, str):
            return "#000"
        if style_annotation == "#fff":
            return "#000"
        else:
            return "#fff"
    return dash.no_update

第二个callback用来开关指定色。其选中example_data中的前三条文字标注，并分别为其附上标注对应的颜色。以下callback同样演示了如何使用不同的颜色格式。例如，hsl(180, 100%, 50%)和cyan或#0ff都是等价的。

@app.callback(
    Output("annotator", "colors"),
    Input("btn-specific", "n_clicks"),
    State("annotator", "colors"),
    prevent_initial_call=True,
)
def toggle_specific_colors(
    n_clicks: Optional[int], colors: Optional[Mapping[str, str]]
):
    if n_clicks:
        if colors:
            return None
        else:
            return dict(
                zip(
                    (ditem["comment"] for ditem in example_data["data"]),
                    ("hsl(180, 100%, 50%)", "rgb(255, 0, 255)", "#ff0"),
                )
            )
    return dash.no_update

最后的callback用来开关动态颜色功能。它的实现非常简单。唯一需要做的就是控制属性is_color_dynamic。

@app.callback(
    Output("annotator", "is_color_dynamic"),
    Input("btn-dynamic", "n_clicks"),
    State("annotator", "is_color_dynamic"),
    prevent_initial_call=True,
)
def toggle_dynamic_color(n_clicks: Optional[int], is_color_dynamic: Optional[bool]):
    if n_clicks:
        return not bool(is_color_dynamic)
    return dash.no_update