streamlit-draw-canvasで矩形および点を描画すーる

# はじめに
streamlit-draw-canvasで矩形および点を描画していきます

# 開発環境
- Windows 11 PC
- Python 3.11
- Streamlit

# 導入
## ライブラリをインストール

~~~cmd
pip install streamlit
pip install streamlit-drawable-canvas
~~~

## 実行方法

~~~cmd
streamlit run filename.py
~~~

http://localhost:8501/ にアクセス

## 矩形の描画
~~~drawable-canvas-rect.py
import streamlit as st
from streamlit_drawable_canvas import st_canvas

# Streamlit app タイトル
st.title("Drawable Canvas Demo")

# キャンバスの設定
canvas_result = st_canvas(
    fill_color="rgba(255, 165, 0, 0.3)",  # 塗りつぶしの色
    stroke_width=2,  # 線の太さ
    stroke_color="#000000",  # 線の色
    background_color="#FFF",  # 背景色
    background_image=None,  # 背景画像（なし）
    update_streamlit=True,  # Streamlitをリアルタイムで更新
    height=150,  # キャンバスの高さ
    drawing_mode="rect",  # 描画モード（矩形）
    key="canvas",  # キャンバスのキー
)

# 描画結果の表示
if canvas_result.json_data is not None:
    st.json(canvas_result.json_data)

~~~

![20231228-133944-3262dbce.png](https://gachimoto-qiita-storage.s3.amazonaws.com/20231228-133944-3262dbce.png)

~~~json
{
  "version": "4.4.0",
  "objects": [],
  "background": "#FFF"
}
~~~

![20231228-134130-c548718f.png](https://gachimoto-qiita-storage.s3.amazonaws.com/20231228-134130-c548718f.png)

~~~json
{
  "version": "4.4.0",
  "objects": [
    {
      "type": "rect",
      "version": "4.4.0",
      "originX": "left",
      "originY": "top",
      "left": 181,
      "top": 21,
      "width": 137,
      "height": 96,
      "fill": "rgba(255, 165, 0, 0.3)",
      "stroke": "#000000",
      "strokeWidth": 2,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeDashOffset": 0,
      "strokeLineJoin": "miter",
      "strokeUniform": true,
      "strokeMiterLimit": 4,
      "scaleX": 1,
      "scaleY": 1,
      "angle": 0,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "rx": 0,
      "ry": 0
    }
  ],
  "background": "#FFF"
}
~~~

## 点の描画

~~~drawable-canvas-point.py
import streamlit as st
from streamlit_drawable_canvas import st_canvas

# Streamlitアプリケーションのタイトルを設定
st.title("Drawable Canvas Demo")

# Drawable Canvasを表示し、背景画像のサイズに合わせて高さと幅を設定
canvas_result = st_canvas(
    fill_color="rgba(255, 165, 0, 0.3)",  # 描画色
    stroke_width=5,  # 線の太さ
    stroke_color="rgb(255, 165, 0)",  # 線の色
    background_color="#FFF",  # 背景色
    background_image=None,  # 背景画像（なし）
    update_streamlit=True,  # Streamlitをリアルタイムで更新
    height=150,  # キャンバスの高さ
    drawing_mode="point",  # 描画モード（点）
)

# 描画結果の表示
if canvas_result.json_data is not None:
    st.json(canvas_result.json_data)
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/73e45d41-b273-846a-3009-418f5b72747c.png)

~~~
{
  "version": "4.4.0",
  "objects": [
    {
      "type": "circle",
      "version": "4.4.0",
      "originX": "left",
      "originY": "center",
      "left": 149.5,
      "top": 95,
      "width": 6,
      "height": 6,
      "fill": "rgba(255, 165, 0, 0.3)",
      "stroke": "rgb(255, 165, 0)",
      "strokeWidth": 5,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeDashOffset": 0,
      "strokeLineJoin": "miter",
      "strokeUniform": false,
      "strokeMiterLimit": 4,
      "scaleX": 1,
      "scaleY": 1,
      "angle": 0,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "radius": 3,
      "startAngle": 0,
      "endAngle": 6.283185307179586
    }
  ],
  "background": "#FFF"
}
~~~

<!--
## 点の描画
~~~drawable-canvas-point.py
import streamlit as st
from streamlit_drawable_canvas import st_canvas

# Streamlitアプリケーションのタイトルを設定
st.title("Drawable Canvas Demo")

# Drawable Canvasを表示し、背景画像のサイズに合わせて高さと幅を設定
canvas_result = st_canvas(
    fill_color="rgba(255, 165, 0, 0.3)",  # 描画色
    stroke_width=5,  # 線の太さ
    stroke_color="rgb(255, 165, 0)",  # 線の色
    background_color="#FFF",  # 背景色
    background_image=None,  # 背景画像（なし）
    update_streamlit=True,  # Streamlitをリアルタイムで更新
    height=150,  # キャンバスの高さ
)

# 描画結果の表示
if canvas_result.json_data is not None:
    st.json(canvas_result.json_data)
~~~

![20231228-141338-ef03f707.png](https://gachimoto-qiita-storage.s3.amazonaws.com/20231228-141338-ef03f707.png)

~~~json
{
  "version": "4.4.0",
  "objects": [
    {
      "type": "path",
      "version": "4.4.0",
      "originX": "left",
      "originY": "top",
      "left": 204.5,
      "top": 66.5,
      "width": 0.01,
      "height": 0,
      "fill": null,
      "stroke": "rgb(255, 165, 0)",
      "strokeWidth": 5,
      "strokeDashArray": null,
      "strokeLineCap": "round",
      "strokeDashOffset": 0,
      "strokeLineJoin": "round",
      "strokeUniform": false,
      "strokeMiterLimit": 10,
      "scaleX": 1,
      "scaleY": 1,
      "angle": 0,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": null,
      "visible": true,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "paintFirst": "fill",
      "globalCompositeOperation": "source-over",
      "skewX": 0,
      "skewY": 0,
      "path": [
        [
          "M",
          206.995,
          69
        ],
        [
          "L",
          207.005,
          69
        ]
      ]
    }
  ],
  "background": "#FFF"
}
~~~

-->

お疲れさまでした。