iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

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

Fabric.js 是一個 JavaScript 圖形處理庫,建立於 HTML5 Canvas之上,專門用於在網頁上創建和操作圖像和圖形。
它提供了簡單直觀的 API,使得在 Canvas 上的互動行為不會讓你寫到抓狂。從簡單的繪圖應用,到可滑鼠互動的動畫、複雜的圖像編輯器,Fabric.js 都能滿足你的需求。

因工作需求而開始研究這個有趣的東西,在記憶退卻前快來記錄一下(╯✧∇✧)╯

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

Day1- Fabric.js 是什麼?他可以做些什麼

Fabric.js 是什麼? Fabric.js 是一個開源的 JavaScript 庫 GitHub - fabricjs/fabric.js,為 HTML5...

2024-08-04 ‧ 由 merano5342 分享
DAY 2

Day2- Fabric.js 與原生 Canvas 的關係?!

Canvas API 為 Web 開發者提供了強大的 2D 繪圖能力,但在處理複雜的互動式圖形應用時,原生 Canvas 可能顯得繁瑣。Fabric.js 作為...

2024-08-05 ‧ 由 merano5342 分享
DAY 3

Day3- 來概念解構 Fabric.js 吧 (1) - 核心概念

在真正開始動手做之前先來了解 fabric.js 有哪些面向吧!就算功能沒學起來至少知道未來可以朝什麼方向下關鍵字XD 核心模塊介紹 分為這幾個區塊: 畫布管...

2024-08-06 ‧ 由 merano5342 分享
DAY 4

Day4-來概念解構 Fabric.js 吧 (2)-物件導向特性與物件(Object)與擴展機制(extend)

物件導向的 fabric.js 繼昨天講了那麼多特性,各種蛛絲馬跡都指出,他是一個 物件導向架構!以下進行各種比對分析: Fabric.js 把所有畫布上的東西...

2024-08-07 ‧ 由 merano5342 分享
DAY 5

Day5- 來概念解構 Fabric.js 吧 (3)-事件(events)與生命週期

事件系統(events) Fabric.js有一個強大的事件系統,允許監聽和響應各種畫布和物件事件,很像 javascript 的事件一樣,可以加上跟移除監聽器...

2024-08-08 ‧ 由 merano5342 分享
DAY 6

Day6- 小小介紹 Fabric.js 的歷史沿革

在進入實作之前,做最後小小介紹 Fabric.js 的歷史沿革: 起源 Fabric.js 於2010年由 Juriy Zaytsev(也被稱為"ka...

2024-08-09 ‧ 由 merano5342 分享
DAY 7

Day7-從頭開始,Fabric.js 畫布的基礎設定

引入 Fabric.js 套件 首先,在你的 HTML 文件中引入 Fabric.js。 引入方式1:你可以從 CDN 引入 <script src=&q...

2024-08-10 ‧ 由 merano5342 分享
DAY 8

Day8- 開始來畫形狀了!Fabric.js 基本形狀繪製:矩形、圓形、多邊形...

共同屬性(常用) 主要是控制圖形共同身為物件都可以使用的屬性 位置 left: 左邊距離畫布左邊的像素數 top: 頂部距離畫布頂部的像素數 顏色外觀(...

2024-08-11 ‧ 由 merano5342 分享
DAY 9

Day9-在 Fabric.js 上畫線吧-路徑(Path)與自由繪製 (Free Drawing)

今天主要會介紹 直線(fabric.Line) 、路徑 (fabric.Path)、自由繪製 (Free Drawing),這三種跟路徑/向量有關的畫圖方式。...

2024-08-12 ‧ 由 merano5342 分享
DAY 10

Day10-不只是個畫圖的,也可以是個打字的- fabric.js的文本處理&如何使用不同字型

文本處理:樣式、編輯與排版 可以自定義文本的字體、大小、顏色、粗細等屬性 設置文本對齊方式(左對齊、居中、右對齊),行高調整 支持下劃線、刪除線等效果 以下...

2024-08-13 ‧ 由 merano5342 分享