Streamlit-Drawable-Canvas：终极交互式绘图组件，让你的Streamlit应用秒变画板-二趣网

Streamlit-Drawable-Canvas：终极交互式绘图组件，让你的Streamlit应用秒变画板

【免费下载链接】streamlit-drawable-canvasDo you like Quick, Draw? Well what if you could train/predict doodles drawn inside Streamlit? Also draws lines, circles and boxes over background images for annotation.项目地址: https://gitcode.com/gh_mirrors/st/streamlit-drawable-canvas

Streamlit-Drawable-Canvas是一款基于Fabric.js的Streamlit自定义组件，它能让你在Streamlit应用中轻松集成交互式绘图功能。无论是快速原型设计、图像标注还是创意涂鸦，这个强大的组件都能让你的应用瞬间拥有专业级画板功能，无需复杂的前端开发知识。

为什么选择Streamlit-Drawable-Canvas？

在数据可视化和机器学习应用中，有时我们需要让用户直接在界面上绘制图形或标注图像。传统的解决方案往往需要繁琐的前后端交互开发，而Streamlit-Drawable-Canvas将这一切简化到只需几行Python代码。

这款组件的核心优势在于：

零前端知识要求：完全通过Python API控制，无需编写JavaScript
丰富的绘图工具：支持自由绘制、直线、圆形、矩形等多种图形
高度可定制：笔触颜色、宽度、背景样式等均可灵活配置
即时数据反馈：绘制内容可直接转换为NumPy数组或Pillow图像，方便后续处理

快速安装指南

安装Streamlit-Drawable-Canvas非常简单，只需使用pip命令即可：

pip install streamlit-drawable-canvas

如果你需要从源码安装，可以克隆仓库后进行本地安装：

git clone https://gitcode.com/gh_mirrors/st/streamlit-drawable-canvas cd streamlit-drawable-canvas pip install .

入门级使用示例

下面是一个最简单的使用示例，只需几行代码就能创建一个功能完整的绘图应用：

import streamlit as st from streamlit_drawable_canvas import st_canvas # 创建画布组件 canvas_result = st_canvas( fill_color="rgba(255, 165, 0, 0.3)", # 填充颜色 stroke_width=2, # 笔触宽度 stroke_color="#ff0000", # 笔触颜色 background_color="#eeeeee", # 背景颜色 height=400, # 画布高度 width=600, # 画布宽度 drawing_mode="freedraw", # 绘图模式 key="canvas", # 组件唯一标识 ) # 显示绘制结果 if canvas_result.image_data is not None: st.image(canvas_result.image_data)

核心功能详解

多样化的绘图工具

Streamlit-Drawable-Canvas提供了多种绘图工具，可通过drawing_mode参数进行切换：

freedraw：自由绘制模式，支持手绘线条
line：直线工具，可绘制精确的直线
rect：矩形工具，支持绘制矩形和正方形
circle：圆形工具，支持绘制圆形和椭圆
polygon：多边形工具，可绘制任意多边形

这些工具的实现代码位于streamlit_drawable_canvas/frontend/src/lib/目录下，包括circle.ts、line.ts、rect.ts等文件。

图像标注功能

除了创建空白画布，该组件还支持上传背景图片进行标注：

from PIL import Image import numpy as np # 上传图片 uploaded_file = st.file_uploader("上传背景图片", type=["png", "jpg"]) if uploaded_file is not None: image = Image.open(uploaded_file) img_array = np.array(image) # 在图片上创建画布 canvas_result = st_canvas( background_image=Image.open(uploaded_file), height=image.height, width=image.width, drawing_mode="rect", # 使用矩形工具进行标注 key="image_annotation", )

绘制数据获取与处理

绘制完成后，你可以通过canvas_result对象获取多种格式的绘制数据：

image_data：NumPy数组格式的图像数据
json_data：JSON格式的绘制对象数据
canvas_height和canvas_width：画布尺寸信息

这些数据可以直接用于机器学习模型训练、图像分析或保存为图片文件。

高级配置选项

Streamlit-Drawable-Canvas提供了丰富的配置选项，让你可以完全定制画布的外观和行为：

canvas_result = st_canvas( # 基础配置 height=500, width=700, # 样式配置 stroke_width=st.slider("笔触宽度", 1, 25, 3), stroke_color=st.color_picker("笔触颜色", "#000000"), fill_color=st.color_picker("填充颜色", "#ffffff"), background_color=st.color_picker("背景颜色", "#eeeeee"), # 行为配置 drawing_mode=st.selectbox( "绘图模式", ["freedraw", "line", "rect", "circle", "polygon"] ), key="advanced_canvas", # 交互配置 display_toolbar=st.checkbox("显示工具栏", True), point_display_radius=st.slider("点显示半径", 0, 20, 3), )

实际应用场景

1. 快速原型设计

设计师可以使用Streamlit-Drawable-Canvas快速绘制界面原型，配合Streamlit的交互组件，实时调整设计方案。

2. 图像标注工具

在计算机视觉项目中，你可以用它创建简单而高效的图像标注工具，标注结果可直接用于模型训练。

3. 教育类应用

创建互动式教学工具，让学生在网页上直接绘制数学公式、化学结构或其他教学内容。

4. 创意绘画应用

结合Streamlit的部署能力，快速创建并分享在线绘画应用，支持多人协作创作。

常见问题解答

Q: 如何保存绘制的图像？

A: 可以使用Pillow库将image_data保存为图片文件：

from PIL import Image import numpy as np if canvas_result.image_data is not None: img = Image.fromarray(canvas_result.image_data.astype('uint8'), 'RGBA') img.save('drawing.png') st.success("图像保存成功！")

Q: 是否支持撤销/重做功能？

A: 是的，组件内置了撤销/重做功能，用户可以通过工具栏上的按钮或快捷键操作。相关实现代码在streamlit_drawable_canvas/frontend/src/components/CanvasToolbar.tsx中。

Q: 能否自定义工具栏？

A: 可以通过修改前端代码来自定义工具栏，工具栏组件位于streamlit_drawable_canvas/frontend/src/components/目录。

总结

Streamlit-Drawable-Canvas为Streamlit应用带来了强大的绘图能力，无论是数据科学家、机器学习工程师还是开发者，都能通过这个组件轻松添加交互式绘图功能。它的简单易用性和丰富功能使其成为Streamlit生态中不可或缺的一部分。

如果你正在开发需要用户绘图或图像标注功能的Streamlit应用，不妨尝试一下Streamlit-Drawable-Canvas，它可能会成为你项目中的"秘密武器"！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析