最近項目需要一些繪圖的操作,所以對比了一些熱門一點的開源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.js
和two.js
能保持60幀,其他的都小於30幀。因為優異的渲染性能,pixi.js
主要用於做游戲。
基礎繪圖函數似乎沒有fabric.js
豐富,拖拽等操作也需要自己編寫,不像fabric.js
已經默認開啟。
two.js
同樣支持webgl渲染,基礎繪圖接口很豐富,官網例子很漂亮。但是似乎除了svg沒找到加載普通位圖的接口,並且似乎不支持es模塊的加載方式,也不支持typescript。不過github上的開發還算活躍,后面應該會補上。
所以比較之后的結果是,如果需要追求渲染性能,應該使用pixi.js
,但僅僅是方便圖形操作,直接用fabric.js
也夠了。