使用PyDash在图片上绘制多边形

本教程将演示如何使用PyDash库创建一个简单的应用程序，允许用户在图片上绘制多边形。

以下是完整的代码示例：

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

app = dash.Dash(__name__)

# 图片路径
image_path = 'path_to_your_image.jpg'  # 请替换为你的图片路径

# 初始化多边形坐标
polygon_data = []

app.layout = html.Div(children=[
    html.H1(children='在图片上绘制多边形'),

    # 图片展示
    html.Img(src=image_path, style={'width': '50%'}),

    # 绘制多边形
    dcc.Graph(
        id='polygon-graph',
        figure={
            'data': [
                go.Scatter(x=[],
                           y=[],
                           mode='lines',
                           name='polygon',
                           line={'color': 'red'})
            ],
            'layout': go.Layout(
                title='绘制多边形',
                showlegend=True,
                hovermode='closest',
                xaxis={'visible': False},
                yaxis={'visible': False}
            )
        }
    ),

    # 点击事件回调函数
    html.Div(id='click-data')
])


# 点击事件回调函数
@app.callback(
    dash.dependencies.Output('click-data', 'children'),
    [dash.dependencies.Input('polygon-graph', 'clickData')])
def display_click_data(clickData):
    if clickData is not None:
        point = clickData['points'][0]
        polygon_data.append((point['x'], point['y']))
        print('绘制多边形顶点坐标：', polygon_data)

    return ''


if __name__ == '__main__':
    app.run_server(debug=True)

步骤：

安装必要库：
```
pip install dash plotly
```
替换图片路径： 将代码中image_path变量的值替换为你自己的图片路径。
运行代码： 保存代码并运行。这将启动一个本地web服务器，并在浏览器中打开应用程序。
绘制多边形： 在图片区域点击鼠标，即可添加多边形的顶点。每次点击都会将顶点坐标打印到控制台。

代码说明：

该代码使用dash_html_components模块创建网页的基本结构，包括标题、图片和图表区域。
dcc.Graph组件用于创建图表。
go.Scatter用于绘制多边形线条。
@app.callback装饰器用于定义点击事件的回调函数。
回调函数display_click_data会在每次点击图表区域时被触发，并将点击坐标添加到polygon_data列表中。

注意：

此代码示例仅提供基本功能，你可以根据需要进行扩展，例如添加保存多边形数据、编辑多边形等功能。
你可以调整图表布局和样式，以满足你的需求。