iT邦幫忙

2024 iThome 鐵人賽

DAY 10
0
Modern Web

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

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

  • 分享至 

  • xImage
  •  

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

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

以下是一個使用 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!');

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

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

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

那我到底可以用哪些字型呢?🤯

搜尋「開源字型」,肯定免費!保證可商用!

--- from 剪映、InShot 裡的「免費」字型陷阱:教你避免被告、收取高額罰款 - justfont blog
(更多字型授權的內容可以看 justfont 的文章)

很突然地變成了一個字型版權小教室,一套中文字型的生成很不容易。
本人私底下也是個愛字人,字型的權利真的是需要大家一起來維護🥺💪


上一篇
Day9-在 Fabric.js 上畫線吧-路徑(Path)與自由繪製 (Free Drawing)
下一篇
Day11-fabricjs 的花式圖片上傳、濾鏡使用
系列文
一起來玩圖像編輯器:Fabric.js 的實戰修煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言