Streamlit Drawable Canvas 使用教程

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

项目介绍

Streamlit Drawable Canvas 是一个开源项目，它允许用户在 Streamlit 应用中创建一个可绘制的画布。这个画布支持多种绘图功能，如画线、矩形、圆形等，并且可以实时显示用户的绘图结果。该项目的主要目的是为开发者提供一个简单易用的工具，以便在他们的 Streamlit 应用中集成绘图功能。

项目快速启动

安装

首先，你需要安装 streamlit-drawable-canvas 包。你可以使用以下命令进行安装：

pip install streamlit-drawable-canvas

示例代码

以下是一个简单的示例代码，展示如何在 Streamlit 应用中使用 streamlit-drawable-canvas：

import streamlit as st
from streamlit_drawable_canvas import st_canvas

# 设置页面标题
st.title("Streamlit Drawable Canvas 示例")

# 创建一个可绘制的画布
canvas_result = st_canvas(
    fill_color="rgba(255, 165, 0, 0.3)",  # 填充颜色
    stroke_width=5,  # 笔触宽度
    stroke_color="#FFFFFF",  # 笔触颜色
    background_color="#000000",  # 背景颜色
    update_streamlit=True,  # 实时更新
    height=400,  # 画布高度
    drawing_mode="freedraw",  # 绘图模式
    key="canvas",  # 画布的唯一标识
)

# 显示绘图结果
if canvas_result.image_data is not None:
    st.image(canvas_result.image_data)

应用案例和最佳实践

应用案例

1. 在线白板应用：使用 streamlit-drawable-canvas 可以轻松创建一个在线白板应用，用户可以在上面进行自由绘图和标注。
2. 教育工具：教师可以使用这个画布来创建互动式的教学内容，学生可以在画布上进行练习和反馈。
3. 设计原型：设计师可以使用这个工具来快速绘制和展示他们的设计原型。

最佳实践

1. 自定义样式：通过调整 fill_color、stroke_width 和 stroke_color 等参数，可以自定义画布的外观和绘图体验。
2. 实时反馈：设置 update_streamlit=True 可以让画布的绘图结果实时更新到 Streamlit 应用中，提供更好的用户体验。
3. 多种绘图模式：通过设置不同的 drawing_mode，如 freedraw、line、rect 等，可以满足不同的绘图需求。

典型生态项目

streamlit-drawable-canvas 是 Streamlit 生态系统中的一个重要组件。Streamlit 是一个用于构建数据科学和机器学习应用的开源框架，它提供了丰富的组件和工具，帮助开发者快速构建和部署应用。以下是一些与 streamlit-drawable-canvas 相关的典型生态项目：

1. Streamlit：Streamlit 本身是一个强大的框架，用于构建交互式的数据应用。
2. Streamlit Components：Streamlit 提供了一系列的组件，允许开发者扩展和自定义他们的应用。
3. Streamlit Community Cloud：Streamlit 社区云平台，提供了一个托管和分享 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