[iDraw.js] 基於Canvas的前端繪圖JavaScript庫

宅宅很神

[iDraw.js] 基於Canvas的前端繪圖JavaScript庫

來源：
https://chenshenhai.com/blog/2021/09/09


iDraw.js簡介

一個基於純Canvas來實現繪圖和操控素材能力的JavaScript庫。

可以基於 iDraw.js 進行擴充套件自定義開發各種視覺化操控應用，這裡可以參考 idraw.js.org/studio/ 案例

iDraw.js有哪些功能

• 支援繪製文字、矩形、圓形、圖片、HTML片段和SVG片段 繪圖元素
  

• 繪製文字
  

• 繪製矩形
  

• 繪製圓形
  

• 繪製圖片
  

• 繪製HTML片段
  

• 繪製SVG片段
  

• 支援基於Canvas的視覺化操作
  

iDraw.js有哪些特點

• 可以繪製文字、矩形、圓形、圖片、HTML片段和SVG檔案，並且作為繪圖元素。
• 可以直接在Canvas操控以上繪圖元素，不用擔心CSS和DOM變化的污染問題。
• Canvas操控繪製，並且是所見即所得可以直接導出繪製的圖片結果。
• 由於視覺化操控和圖片產生都是基於Canvas，可以儘量減少繪圖的瀏覽器相容問題。
  

實際使用案例

• 一個基於 iDraw.js 實現的UI視覺化繪圖
• @idraw/studio 的實現
  

其他
GitHub地址: github.com/idrawjs/
官方網站: idraw.js.org
Playground API示例: idraw.js.org/playground
基於iDraw.js的Studio實際案例: idraw.js.org/studio



影片說明
https://www.zhihu.com/zvideo/1429259835540348928