幾個前端2d圖形庫的比較


最近項目需要一些繪圖的操作,所以對比了一些熱門一點的開源2d圖形庫。

fabric.js

一個操作canvas的庫,在github上有18k的star。支持svg與canvas的互相轉換,基礎的圖形元素當作對象操作,包含了拖拽、縮放、變形等處理,支持圖層。
缺點似乎是官方的自動生成的文檔並不是那么友好,好在demo挺多的。

Konva.js

fabric.js的功能很像,普通繪圖元素也是當作對象來操作,掛網文檔也更優秀一些,但是github上沒有fabric.js熱門,只有不到6k的star。

pixi.js

支持webgl的渲染引擎,性能非常優秀,在這個benchmarks頁面上看到,我的設備上,正方形數調到5000,只有pixi.jstwo.js能保持60幀,其他的都小於30幀。因為優異的渲染性能,pixi.js主要用於做游戲。
基礎繪圖函數似乎沒有fabric.js豐富,拖拽等操作也需要自己編寫,不像fabric.js已經默認開啟。

two.js

同樣支持webgl渲染,基礎繪圖接口很豐富,官網例子很漂亮。但是似乎除了svg沒找到加載普通位圖的接口,並且似乎不支持es模塊的加載方式,也不支持typescript。不過github上的開發還算活躍,后面應該會補上。


所以比較之后的結果是,如果需要追求渲染性能,應該使用pixi.js,但僅僅是方便圖形操作,直接用fabric.js也夠了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM