andfanilo/streamlit-drawable-canvas

解決的問題

提供一種將互動式繪圖畫布整合至 Streamlit 應用的方式，讓使用者可以直接在 Web 應用中繪製、註解與操作圖形，無需從零開始建構自訂前端元件。

運作方式

以 Fabric.js 建構為 Streamlit 元件，於瀏覽器中渲染支援多種繪圖模式（自由繪圖、線條、矩形、圓形、多邊形與文字）的畫布。可使用背景圖片或顏色初始化，並將產生的影像資料（以 numpy 陣列形式）或物件屬性（以 JSON 形式）回傳至 Streamlit 後端，以進行進一步處理。

適用對象

需要使用者視覺輸入的 Streamlit 應用開發者，例如影像標註工具、繪圖介面或簡單的圖形編輯器。

主要特色

• 多種繪圖模式：支援自由繪圖、點、線條、矩形、圓形、多邊形與文字。
• 物件操作：允許使用者旋轉、傾斜、縮放與移動畫布上已放置的物件。
• 資料整合：同時回傳原始影像資料與每個繪製物件的詳細 JSON 屬性至 Python 後端。
• 註解支援：包含專用的 labeled_rect 模式，用於建立帶標籤的邊界框。
• 可自訂背景：支援背景圖片，並提供拉伸或包含兩種方式來適配。