鐵人檔案
Fabric.js 是一個 JavaScript 圖形處理庫，建立於 HTML5 Canvas之上，專門用於在網頁上創建和操作圖像和圖形。
它提供了簡單直觀的 API，使得在 Canvas 上的互動行為不會讓你寫到抓狂。從簡單的繪圖應用，到可滑鼠互動的動畫、複雜的圖像編輯器，Fabric.js 都能滿足你的需求。
因工作需求而開始研究這個有趣的東西，在記憶退卻前快來記錄一下(╯✧∇✧)╯
在查資料的過程中更認識了跟 fabric.js 有點像的 Paper.js 這個酷東西，我們在fabric.js 上休息一下，小小介紹一下他吧～ Paper.j...
今天來實現如何在手機上也可以順利跟你的畫布互動！其實手機上本來就可以運行，只是在手機上使用者習慣的觸控行為跟滑鼠控制的方式蠻不一樣的，例如：如果想放大一張圖片，...
今天來畫線段吧，然後讓線段可以變成一個閉合多角型，直接轉換為圖形 連接線段的方式 (詳見例子裡，這邊是拆解執行想法) addPoint(o) 函數： 在鼠...
講了那麼多，究竟哪些是實際上常用的 api 呢？以及這些用法有什麼共通之處呢？讓我們從操作 api 面向再來做一次大回顧吧～ 物件創建模式 大多數 Fabric...
Q: 為什麼fabricjs會有兩層畫布 咦～ 我的 download button 下面明明就只有寫一個 id 是 my-canvas 的畫布。為什麼打開 e...
官方的wiki裡有整理一些有使用 fabric.js 的站，這個列表最後更新是2020年，所以蠻多站也不能用了，但總數還是很龐大。fabric.js-wiki-...
以下，來說說故事，這是一個使用 fabric.js + Next.js(React) 製作的專案剛開始對技術選用與 React、fabric.js 底層理解都不...
接續昨天...既然不能用 Redux 來存畫布，那畫布的部分我改成用 useContext 來存吧！當下看起來，要在多個 component 裡使用、且不使用...
直到發現其實改變 canvas 並不需要拿到 canvas 本體的最新變數，只要對他的記憶體空間處理就好，這是什麼意思呢？舉個手術的例子： 想像一個病人在手術過...
結果昨天因為篇幅來不及寫完最終怎麼處理，而且寫的有點亂最後的結論是我將 canvas 本體使用 ref 存儲，並在 context 裡初始化，以便傳輸到不同co...
