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

2024 iThome 鐵人賽

DAY 10

Modern Web

一起來玩圖像編輯器：Fabric.js 的實戰修煉系列第 10 篇

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

16th鐵人賽 #fabric.js #canvas #font

merano5342

2024-08-13 23:56:51

112 瀏覽

分享至

文本處理：樣式、編輯與排版

可以自定義文本的字體、大小、顏色、粗細等屬性
設置文本對齊方式(左對齊、居中、右對齊)，行高調整
支持下劃線、刪除線等效果

以下是一個使用 fabric.Text 的示例，展示如何設置這些屬性：

const canvas = new fabric.Canvas('canvas');

const text = new fabric.Text('Hello, Fabric.js!', {
  fontSize: 30,
  fontWeight: 'bold',
  fontFamily: 'Arial',
  fontStyle: 'italic',
  
  textAlign: 'center',
  lineHeight: 1.5,
  charSpacing: 200,
  
  underline: true,
  overline: false,
  linethrough: false,
  textBackgroundColor: 'yellow',
});

canvas.add(text);

文字可設定的屬性

除了基本屬性以外，可設置的文字相關屬性

fontSize: 設置文本的字體大小。
fontWeight: 設置文本的字體粗細。
fontFamily: 設置文本的字體家族。
fontStyle: 設置文本的字體樣式。
textAlign: 設置文本的對齊方式。
lineHeight: 設置文本的行高。
charSpacing: 設置文本的字符間距。
underline: 設置文本是否顯示下劃線。
overline: 設置文本是否顯示上劃線。
linethrough: 設置文本是否顯示刪除線。
textBackgroundColor: 設置文本的背景顏色。

如何在 Fabric.js 中使用外部字型

1. 首先，您需要確保您的字型文件可以在網頁中使用。

通常，我們會使用 Web Font 格式，如 .woff 或 .woff2 文件。

2. 使用 @font-face 在你的 CSS 檔中定義字型：

@font-face {
  font-family: 'MyFont'; //可以叫你想叫的名字
  src: url('path/to/your/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

3. 在 Fabric.js 中使用自定義字型：

var text = new fabric.Text('Hello, Custom Font!', {
  left: 100,
  top: 100,
  fontFamily: 'MyFont', // 這裡寫你在 @font-face 裡寫的名字
  fontSize: 30
});

canvas.add(text);

4. 確保字型已加載：

有時，如果字型文件較大或網絡較慢，可能會導致字型未及時加載。
為了確保字型正確應用，您可以使用 Web Font Loader 庫，它支持非同步加載字體，可以更好地控制網頁字體的加載過程。
Web Font Loader 不負責任中文翻譯版 - HackMD

//在 HTML 中引入 Web Font Loader：
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

然後在 JavaScript 中：

WebFont.load({
  custom: {
    families: ['MyFont'],
    urls: ['path/to/your/font.css']
  },
  active: function() {
    // 字型加載完成後的回調
    var text = new fabric.Text('Hello, Custom Font!', {
      left: 100,
      top: 100,
      fontFamily: 'MyFont',
      fontSize: 30
    });
    canvas.add(text);
    canvas.renderAll();
  }
});

如果使用動態加載（你點下字型時才執行下載自行的方式）的字型：

function loadAndUseFont(fontUrl, fontFamily, text) {
  var newStyle = document.createElement('style');
  newStyle.appendChild(document.createTextNode(`
    @font-face {
      font-family: '${fontFamily}';
      src: url('${fontUrl}') format('woff2');
    }
  `));
  document.head.appendChild(newStyle);

  // 使用 FontFaceObserver 來確保字型加載完成
  var font = new FontFaceObserver(fontFamily);
  font.load().then(function() {
    var fabricText = new fabric.Text(text, {
      left: 100,
      top: 100,
      fontFamily: fontFamily,
      fontSize: 30
    });
    canvas.add(fabricText);
    canvas.renderAll();
  });
}

// 使用方法
loadAndUseFont('path/to/your/font.woff2', 'MyFont', 'Hello, Dynamic Font!');

注意使用自定義字型時是否有適當的許可或授權

!!! 注意，使用自定義字型時要確保有適當的許可或授權，不是你有這個字型檔就可以直接放上來用。
會應應不同情境而有不同的使用範圍，可能的情境舉例：

網路上下載下來的限個人使用的免費字型，其實是不能拿來做商業用途的，你不能做廣告傳單、有盈利的影片封面
Q:我有訂閱網頁字型服務，我可以把這字型引入到我使用fabric.js的圖像編輯器裡，並供客戶做客製化商品嗎？
A:如果這個字型的服務範圍僅能於網頁中使用，那就是不能用這種方式再製輸出的。（可以寫信去問字型服務商是否有不同字型使用範圍的授權商品）
Q:我有已買斷的字型，他可以個人／商業用途，我可以放到這圖像編輯器裡嗎？
A:如果字型有明定不能放到網頁／伺服器上那就不行喔