fabric.js-HTML5 Canvas 加強套件
HTML5 Canvas 出了以後對於動畫這塊真的很棒,但要用原生 Canvas 提供的 API 去繪製一些圖形,通常我們會也利用物件導向的概念去封裝它在使用,語法複雜,而 Fabricjs 就幫我們做好這些事情,讓我們能夠透過把新增物件的方式,快速的去把我們想要的圖形繪製出來,並且提供很方便事件接口讓我們能輕鬆的操控canvas 的動作。
什麼是 Fabricjs
一個基於 HTML5 Canvas API 所建立的 Library
用新增物件的方式快速建立 Canvas 圖形。
可建立的物件有包括
- 簡單的幾何圖形,如圓形、矩形、多邊形,或是線條。
- 複雜多個節點的圖形
- 匯入圖片
- 匯入 svg
可以輕鬆使用滑鼠控制這一切你所創造的物件,如
- 位置
- 大小
- 旋轉角度
且透過 javascript 去控制這些你所建立的物件圖形的屬性像是
- 顏色
- 透明度
- 圖層 (z-index)
實際應用
Fabricjs 能夠讓我們快速、簡單的將 Canvas 中的圖形包裝成物件,且和使用者互動。一般最常見的實作是製作網頁編輯器
官方網址: 點我進入
