神魂顛倒論壇

 取回密碼
 加入會員
搜尋
檢視: 2620|回覆: 0
收起左側

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

[複製連結]
發表於 2022-3-10 18:53:30 | 顯示全部樓層 |閱讀模式
[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
您需要登入後才可以回帖 登入 | 加入會員

本版積分規則

Archiver|手機版|小黑屋|Flash2u論壇

GMT+8, 2022-5-17 12:00 , Processed in 0.130850 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回覆 回到頂端 返回清單