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-canvasStreamlit-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_colorrgba(255, 165, 0, 0.3), # 填充颜色 stroke_width2, # 笔触宽度 stroke_color#ff0000, # 笔触颜色 background_color#eeeeee, # 背景颜色 height400, # 画布高度 width600, # 画布宽度 drawing_modefreedraw, # 绘图模式 keycanvas, # 组件唯一标识 ) # 显示绘制结果 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_imageImage.open(uploaded_file), heightimage.height, widthimage.width, drawing_moderect, # 使用矩形工具进行标注 keyimage_annotation, )绘制数据获取与处理绘制完成后你可以通过canvas_result对象获取多种格式的绘制数据image_dataNumPy数组格式的图像数据json_dataJSON格式的绘制对象数据canvas_height和canvas_width画布尺寸信息这些数据可以直接用于机器学习模型训练、图像分析或保存为图片文件。高级配置选项Streamlit-Drawable-Canvas提供了丰富的配置选项让你可以完全定制画布的外观和行为canvas_result st_canvas( # 基础配置 height500, width700, # 样式配置 stroke_widthst.slider(笔触宽度, 1, 25, 3), stroke_colorst.color_picker(笔触颜色, #000000), fill_colorst.color_picker(填充颜色, #ffffff), background_colorst.color_picker(背景颜色, #eeeeee), # 行为配置 drawing_modest.selectbox( 绘图模式, [freedraw, line, rect, circle, polygon] ), keyadvanced_canvas, # 交互配置 display_toolbarst.checkbox(显示工具栏, True), point_display_radiusst.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它可能会成为你项目中的秘密武器【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考