iT邦幫忙

2024 iThome 鐵人賽

DAY 30
0
Modern Web

一起來玩圖像編輯器:Fabric.js 的實戰修煉系列 第 30

Day30-fabric.js 的最終回(fabric.js的最佳解?)

  • 分享至 

  • xImage
  •  

結果昨天因為篇幅
來不及寫完最終怎麼處理,而且寫的有點亂
最後的結論是我將 canvas 本體使用 ref 存儲,並在 context 裡初始化,以便傳輸到不同componet 供使用,把較清晰的 function 用 canvas prototype extend 的方式來寫(詳見19,20天),但因為這邊我的理解還不夠透徹,這裡就不多介紹
剩下較複雜的邏輯還是存在 custom hook 裡,方便管理邏輯

關於 prototype 的改寫,以及如何把改寫的部分變成插件,
這看起來是目前效能最好的方式
非常建議去看把編輯器寫成開源專案的:愚坤秦少卫的文章
在我寫專案的路上,他的文章與原始碼幫了我很多忙
對於寫大型canvas編輯器專案來說,在 prototype 上修改/新增功能也許就是最佳解了


結語

終於寫完30天了,真是謝天謝地

原本想說只是寫寫文章,輸出之前的東西,應該不會太難吧

殊不知有時候可能要花個兩三個小時寫。要整理之前的東西,或做出例子,每天還都壓底線交🤣(而且還很常在交出去之後還在修修改改)
每天這樣寫,真的是很硬。但也是這樣被逼才會努力生文章,不然這段時間 fabric.js 的紀錄根本就會搖搖無期

我要偷偷感謝 ai
claude 幫我寫出了很多實例的基底,沒有他我根本無法在這樣的時間內又把內容寫好又寫案例,滿足我實在很想有實例可以給大家玩看看的這一塊。

這個套件距今已出來12年了,什麼花樣都很多,重點只是你要如何跟其他功能、架構的設計上配合得妥當,
現在回頭來看,要可以做到最好的配合,就是在前期可以多了解這個套件的架構邏輯,與他的底層概念。

就算用fabric.js 寫了一個專案,還是感覺自己有非常多不足,以及可以優化的地方
跟各位來回顧了一趟,也是重新理解了一次 fabric.js,在此下台一鞠躬,謝謝收看


上一篇
Day29-fabric.js + React 的重構血淚三部曲(之三)-參照本身還是記憶體空間?
系列文
一起來玩圖像編輯器:Fabric.js 的實戰修煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言