fabric.js-HTML5 Canvas 加強套件

HTML5 Canvas 出了以後對於動畫這塊真的很棒,但要用原生 Canvas 提供的 API 去繪製一些圖形,通常我們會也利用物件導向的概念去封裝它在使用,語法複雜,而 Fabricjs 就幫我們做好這些事情,讓我們能夠透過把新增物件的方式,快速的去把我們想要的圖形繪製出來,並且提供很方便事件接口讓我們能輕鬆的操控canvas 的動作。

什麼是 Fabricjs

一個基於 HTML5 Canvas API 所建立的 Library
用新增物件的方式快速建立 Canvas 圖形。

可建立的物件有包括

  • 簡單的幾何圖形,如圓形、矩形、多邊形,或是線條。
  • 複雜多個節點的圖形
  • 匯入圖片
  • 匯入 svg

可以輕鬆使用滑鼠控制這一切你所創造的物件,如

  • 位置
  • 大小
  • 旋轉角度

且透過 javascript 去控制這些你所建立的物件圖形的屬性像是

  • 顏色
  • 透明度
  • 圖層 (z-index)

實際應用

Fabricjs 能夠讓我們快速、簡單的將 Canvas 中的圖形包裝成物件,且和使用者互動。一般最常見的實作是製作網頁編輯器

官方網址: 點我進入
demo: 點我進入 (相容es5)

夾尾巴

不知道甚麼端的工程師,低薪努力中

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *