客製化商品的好工具─Fabric.js

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>

1. 引入 js 檔
2. 建立一個 canvas 作為繪圖範圍用
3. 建立一個圖案
4. 在 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)

🔹 加入設定

• 縮放至固定寬度：scaleToWidth(value, absolute) → {fabric.Object}

🔹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)

🔹 加入設定

• 縮放：scale(value) → {fabric.Object}

加入可編輯文字

//基本用法
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