系列文章
Day 11 - Fabricjs 把畫布序列化
今天我們要來了解 Fabricjs 的序列化功能。一般我們會在什麼情境下用到這個功能呢？就是存檔和讀檔啦！ 使用者若有存取和讀取自己所設計的圖片的需求，我們會利...
Day 12 -利用序列化與反序列化來實作存檔功能及還原功能
昨天提到利用序列化來將 canvas 變成 json 的格式，今天就來介紹如何把 JSON 格式變回畫布繼續讓使用者使用，今天介紹完反序列化後，就接著來實作序列...
Day 13 - 把物件群組起來
前言 今天要來玩玩 Fabricjs 一個很好用的群組功能，能夠把多個物件群組成一個，就像我們常用的那些繪圖軟體有的群組功能一樣，可以把不同的物件群組起來，讓他...
Day 14 - Fabricjs 製作子類別
我們知道 Fabricjs 是以物件為主的設計理念，其實原本預設的物件就也有繼承的概念了，像是 IText 是繼承於 Text 類別。 今天就來練習如何去創建自...
Day 15 - Fabricjs 物件控制項樣式調整
我們可以透過 Fabricjs 建立自由的畫布讓使用者來操控物件。今天來看看要如何去變更使用者選取後出現的控制項，以及控制滑鼠拖曳的選擇區塊的樣式。 我們可以...
Day 16 - Fabricjs 繪畫功能介紹
今天要來介紹 Fabricjs 的繪畫功能，只要切換一個變數，就能夠輕鬆的將 Fabricjs 原本的物件移動模式，改變成繪畫模式，每一個 Fabricjs 繪...
Day 17 - 簡易小畫家實作
今天就來複習昨天我們學到的 Fabricjs 繪畫功能來做一個簡易的小畫家吧。 透過 Fabricjs 我們可以相當快速又簡單的做出一個類似畫板的功能，讓使用者...
Day 18 - Fabricjs 實作: 圖片上傳並透過拖曳進入 canvas
今天要也是要來將之前所學到的來做一些簡單但卻也很常用到的實作應用 主要利用 Fabricjs drag 事件以及 HTML 圖片來做一個可以直接將外部圖片拖曳到...
Day 19 - 實作 Node.js 上傳圖片及操作 Fabricjs 為圖片加上浮水印
Fabricjs 一個很厲害的優勢他不止能在瀏覽器的環境下執行，也能透過在 nodejs 的環境下執行，若今天我們的後端服務也剛好是使用 nodejs 的環境，...
Day 20 - Fabricjs 實作網格系統
今天用 Fabricjs 製作網格系統，能夠讓使用者自訂間距。 並且再讓使用者縮放矩形時，能夠讓矩形的大小和移動間距可以照著網格。 先讓大家看看結果移動、縮放限...