iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

Fabricjs 筆記 系列

Fabricjs 是基於 HTML5 Canvas Library,能夠很方便的操控自己所新增的圖形或圖片,並且用物件的方式將 Canvas 圖形包裝起來,讓我們能夠快速地去繪製圖形並透過 javascript 去控制那些我們所創造的圖形。

這 30 天主要會記錄一些基本的用法和一些設定,最後再做一些比較應用方面的實作來練習 Fabricjs 的使用。

鐵人鍊成 | 共 30 篇文章 | 23 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11 - Fabricjs 把畫布序列化

今天我們要來了解 Fabricjs 的序列化功能。一般我們會在什麼情境下用到這個功能呢?就是存檔和讀檔啦! 使用者若有存取和讀取自己所設計的圖片的需求,我們會利...

2018-10-25 ‧ 由 Nono 分享
DAY 12

Day 12 -利用序列化與反序列化來實作存檔功能及還原功能

昨天提到利用序列化來將 canvas 變成 json 的格式,今天就來介紹如何把 JSON 格式變回畫布繼續讓使用者使用,今天介紹完反序列化後,就接著來實作序列...

2018-10-26 ‧ 由 Nono 分享
DAY 13

Day 13 - 把物件群組起來

前言 今天要來玩玩 Fabricjs 一個很好用的群組功能,能夠把多個物件群組成一個,就像我們常用的那些繪圖軟體有的群組功能一樣,可以把不同的物件群組起來,讓他...

2018-10-27 ‧ 由 Nono 分享
DAY 14

Day 14 - Fabricjs 製作子類別

我們知道 Fabricjs 是以物件為主的設計理念,其實原本預設的物件就也有繼承的概念了,像是 IText 是繼承於 Text 類別。 今天就來練習如何去創建自...

2018-10-28 ‧ 由 Nono 分享
DAY 15

Day 15 - Fabricjs 物件控制項樣式調整

我們可以透過 Fabricjs 建立自由的畫布讓使用者來操控物件。今天來看看要如何去變更使用者選取後出現的控制項,以及控制滑鼠拖曳的選擇區塊的樣式。 我們可以...

2018-10-29 ‧ 由 Nono 分享
DAY 16

Day 16 - Fabricjs 繪畫功能介紹

今天要來介紹 Fabricjs 的繪畫功能,只要切換一個變數,就能夠輕鬆的將 Fabricjs 原本的物件移動模式,改變成繪畫模式,每一個 Fabricjs 繪...

2018-10-30 ‧ 由 Nono 分享
DAY 17

Day 17 - 簡易小畫家實作

今天就來複習昨天我們學到的 Fabricjs 繪畫功能來做一個簡易的小畫家吧。 透過 Fabricjs 我們可以相當快速又簡單的做出一個類似畫板的功能,讓使用者...

2018-10-31 ‧ 由 Nono 分享
DAY 18

Day 18 - Fabricjs 實作: 圖片上傳並透過拖曳進入 canvas

今天要也是要來將之前所學到的來做一些簡單但卻也很常用到的實作應用 主要利用 Fabricjs drag 事件以及 HTML 圖片來做一個可以直接將外部圖片拖曳到...

2018-11-01 ‧ 由 Nono 分享
DAY 19

Day 19 - 實作 Node.js 上傳圖片及操作 Fabricjs 為圖片加上浮水印

Fabricjs 一個很厲害的優勢他不止能在瀏覽器的環境下執行,也能透過在 nodejs 的環境下執行,若今天我們的後端服務也剛好是使用 nodejs 的環境,...

2018-11-02 ‧ 由 Nono 分享
DAY 20

Day 20 - Fabricjs 實作網格系統

今天用 Fabricjs 製作網格系統,能夠讓使用者自訂間距。 並且再讓使用者縮放矩形時,能夠讓矩形的大小和移動間距可以照著網格。 先讓大家看看結果移動、縮放限...

2018-11-03 ‧ 由 Nono 分享