iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
1
Modern Web

Fabricjs 筆記系列 第 1

Day 1 - 基本介紹

Day 1 - 基本介紹

前言

因為剛好很巧的在工作上很常用的這個 Canvas Canvas 的函式庫,想說就來稍微紀錄一下他一些常用的功能,並且透過實際的練習來更熟悉這個 Library,未來 30 天主要就是來了解這套 Library 主要能做出哪些有趣的應用,發掘 Fabricjs 所提供的各種精美的 api 優美的物件寫法,並且比較一些使用原生 Canvas 和 Fabricjs 在使用上的差異性,最後再做一些簡單的應用和探討一些應用上會遇到的一些問題,加油囉!!

Fabricjs 的歷史

原先為了建立一個有趣的線上客製 T-shirt 的平台,讓客戶可以快速將自己想要的圖案放在 T-shirt 上,線上及時地去預覽客戶設計出來的樣子。

介紹

HTML5 Canvas 也出了好幾年了,若要用原生 Canvas 提供的 API 去繪製一些圖形,通常我們會也利用物件導向的概念去封裝他們,而 Fabricjs 就幫我們做好這些事情,讓我們能夠透過把新增物件的方式,快速的去把我們想要的圖形繪製出來,並且提供很方便事件接口讓我們能輕鬆的操控和傾聽一切關於 canvas 的動作

什麼是 Fabricjs

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

可建立的物件有包括

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

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

  • 位置
  • 大小
  • 旋轉角度

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

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

實際應用

Fabricjs 能夠讓我們快速、簡單的將 Canvas 中的圖形包裝成物件,且和使用者互動。
一般最常見的實作是製作網頁編輯器(小畫家、平面卡片設計之類的應用),
還有像是客製化像是日曆、手機殼、T-shirt,都能透過 fabricjs 快速地去實作。

相關作品

參考連結


下一篇
Day 2 - Fabricjs 和原生 Canvas 比較
系列文
Fabricjs 筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
advancedor96
iT邦新手 5 級 ‧ 2019-03-19 15:18:40

TOAST Image Editor 的連結錯了,應為:
https://ui.toast.com/tui-image-editor/

0
Spark
iT邦新手 5 級 ‧ 2020-01-08 11:12:15

欸~原來你是之前的優選 XDD
厲害!/images/emoticon/emoticon08.gif

我要留言

立即登入留言