Fabric.js 快速筆記 | 基礎篇
2024.03.30 - 04.08
前言
最近開發需要客製化圖片的需求,因此找到了 Fabric.js 這個工具,不過因為它的說明文件對我不太友善,所以想自己整理文件,日後再使用時方便查看,也希望能幫助到想要使用此工具的大家更快上手。
(預計會寫二篇,基礎及進階)
Fabric.js
官網:http://fabricjs.com/
說明文件:http://fabricjs.com/docs/
範例:http://fabricjs.com/demos/
安裝
官網滾到底部有幾個地方可以取得檔案
- 點選 Download the latest version 瀏覽 js 並另存使用
- 左下角 version 為 Github
- 右下角 npm package 則會跳轉至 npm
可依照自己開發需求使用。
基本使用方法
<!--此為複製 github 中的範例-->
<canvas id="canvas" width="300" height="300"></canvas>
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
// 建立一個 canvas 作為繪圖範圍用
const canvas = new fabric.Canvas('canvas');
// 建立一個圖案
const rect = new fabric.Rect({
top: 100,
left: 100,
width: 60,
height: 70,
fill: 'red',
});
// 在 canvas 中加入圖案
canvas.add(rect);
</script>
- 引入 js 檔
- 建立一個 canvas 作為繪圖範圍用
- 建立一個圖案
- 在 canvas 中加入圖案
💡 Canvas 自定義樣式 (文件)
const canvas = new fabric.Canvas('canvas', {
containerClass: "canvas_customer"
});
Fabric 建立 Canvas 時,會為 Canvas 預設添加 .canvas-container
class,如果只有單一種 canvas 想調整時,可直接在 CSS 覆寫即可。如果有多個 canvas 想調整也可以使用 .containerClass
添加自定義的 class
加入圖片
//基本用法
fabric.Image.fromURL('../assets/pug_small.jpg',
function (oImg) {
//加入設定
oImg.scaleToWidth(100);
oImg.scaleToHeight(100);
//加入自定義參數
oImg.metaData = metaData;
//加入圖片
canvas.add(oImg);
//讓 object 置中在 canas 中
canvas.centerObject(oImg);
});
🔹 基本用法:(static) fromURL(url, callbackopt, imgOptionsopt)
🔹 加入設定
🔹Canvas 控制物件
- 讓 object 置中:centerObject(object) → {fabric.Canvas}
加入 SVG 檔
//基本用法
fabric.loadSVGFromURL(
'../lib/tiger2.svg',
function (objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
//加入設定
obj.scale(0.5);
//加入自定義參數
oImg.metaData = metaData;
//加入 SVG 物件
canvas.add(obj).renderAll();
//讓 object 置中在 canas 中
canvas.centerObject(obj);
});
🔹 基本用法:(static) loadSVGFromURL(url, callback, reviveropt, optionsopt)
🔹 加入設定
加入可編輯文字
//基本用法
canvas.add(new fabric.IText('請輸入文字', {
//加入設定
//字體
fontFamily: 'SimHei',
//顏色
fill: '#fff',
//字體大小
fontSize: 16,
//位置-上
top: 100,
//位置-左
left: 100,
//還有其他參數可以設定...
//自定義參數
metaData
}));
🔹 基本用法:new IText() → {fabric.IText}
🔹 加入設定
- 字體:fontFamily :String
- 顏色:fill :String
- 字體大小:fontSize :Number
- 位置-上:top :Number
- 位置-左:left :Number
加入背景圖片
fabric.Image.fromURL('../assets/pug_small.jpg', (img) => {
//基本用法
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
//加入設定
//縮放 X 軸
scaleX: canvas.width / img.width,
//縮放 Y 軸
scaleY: canvas.height / img.height,
});
})
🔹 基本用法:setBackgroundImage(image, callback, optionsopt) → {fabric.Canvas}
🔹 加入設定
- 縮放 X 軸:scaleX :Number
- 縮放 Y 軸:scaleY :Number