iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
4
Modern Web

Fabricjs 筆記系列 第 30

Day 30 - 總結

  • 分享至 

  • xImage
  •  

Fabricjs 在算是在網頁前端生存了相當久的一個 Canvas Library(從 2008 - 今天),對於做線上編輯功能這部分是非常強大的,但在對做出特殊的動畫效果方面就不是強項。

因為他能夠內建讓使用者控制物件的控制項,做到簡易的去縮放圖片,改變層級之類的操作,讓使用者能夠非常快速的在網頁上預覽他們所想像的畫面。

若你有想要做讓使用者在網頁上自由編輯並且儲存客製化的圖片,我就會很推薦這套 Library 畢竟許多常用的功能都幫我們建立好了,若想要擴充也可以透過更改原始碼或者修改 prototype 來做到我們自己的客製化需求。

簡單來說有圖片編輯器的需求,用 Fabricjs 是可以省很多時間的。

未來

目前在 Fabricjs 推出了 2.0.0 版本後新增了很多很好用的功能,如

  • WEBGL 濾鏡 可透過使用 5*4 的 color matrix 來做濾鏡
  • drag & drop 事件的支援
  • 裁切功能的使用優化

到目前還是持續不斷的在更新,未來繼續會增加客製化控制項以及裁切的部分功能。

但目前也還沒有和前端三大框架做整合使用的概念出現,不過在三大框架中要使用 Fabricjs 還是可以透過 ESModule 來引入做使用。

konva.js 一個類似 Fabricjs 功能的 canvas library 有部分支援 react & vue,不過功能應該還不是很完全。

心得

第一次參加鐵人賽,猶豫的很久也是拖到最後一天晚上送出報名,之後就過著每天晚上都在研究 Fabricjs 想要寫什麼,大概是每天都花個兩小時左右吧,每天上完班看了一整天的電腦下班了繼續拚真的是滿累的,有時候都是到八、九點才開始要寫。

每天都想說: 「今天就寫 300 字混過就好了吧...」,結果一寫都會不小心寫超過就停不下來。

過了這 30 天,讓我知道其實平常下班的時間很好利用來學更多新的知識來充實自己 (少了很多攤在沙發上看著手機的時間 XDD)。總之,過了 30 天的鐵人賽對我自己來說也只是開始而已,學了更多後,就更會發現還缺少了什麼,繼續加油囉。

最後感謝我的同事很捧場我的文章,也會給我一些回饋,還都會來幫我留言XD。

30天做了什麼

入門介紹

基本用法

實作


上一篇
Day 29 - Fabricjs 物件填充背景 Pattern
系列文
Fabricjs 筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
advancedor96
iT邦新手 5 級 ‧ 2018-11-14 08:46:41

堅持了1個月了,完賽啦~~~~~~~~

祝你順利領到T-shirt !!!

我要留言

立即登入留言