[iDraw.js] 基於Canvas的前端繪圖JavaScript庫
基於Canvas的前端繪圖JavaScript庫來源：
https://chenshenhai.com/blog/2021/09/09
iDraw.js簡介
一個基於純Canvas來實現繪圖和操控素材能力的JavaScript庫。
可以基於 iDraw.js 進行擴充套件自定義開發各種視覺化操控應用，這裡可以參考 idraw.js.org/studio/ 案例
iDraw.js有哪些功能
[*]支援繪製文字、矩形、圓形、圖片、HTML片段和SVG片段 繪圖元素
[*]繪製文字
https://chenshenhai.com/blog/2021/images/element-text.gif
[*]繪製矩形
https://chenshenhai.com/blog/2021/images/element-rect.gif
[*]繪製圓形
https://chenshenhai.com/blog/2021/images/element-circle.gif
[*]繪製圖片
https://chenshenhai.com/blog/2021/images/element-image.gif
[*]繪製HTML片段
https://chenshenhai.com/blog/2021/images/element-html.gif
[*]繪製SVG片段
https://chenshenhai.com/blog/2021/images/element-svg.gif
[*]支援基於Canvas的視覺化操作
iDraw.js有哪些特點
[*]可以繪製文字、矩形、圓形、圖片、HTML片段和SVG檔案，並且作為繪圖元素。
[*]可以直接在Canvas操控以上繪圖元素，不用擔心CSS和DOM變化的污染問題。
[*]Canvas操控繪製，並且是所見即所得可以直接導出繪製的圖片結果。
[*]由於視覺化操控和圖片產生都是基於Canvas，可以儘量減少繪圖的瀏覽器相容問題。
實際使用案例
[*]一個基於 iDraw.js 實現的UI視覺化繪圖
[*]@idraw/studio 的實現
https://chenshenhai.com/blog/2021/images/snapshot-001.png
其他
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
頁:
[1]