Fabric.js 上标和下标的使用偏方🔥

對于數學化學這方面的項目，“上标” 和 “下标” 功能是很常用的，比如 次方 、化學元素 等表達方式，都需要用到上标或者下标。

在

Fabric.js

中，文本元素有

Text

、

IText

和

Textbox

。本文主要講解

IText

的上标和下标如何實作。在

Text

和

Textbox

中的實作方式也是一樣的。

上标

const iText = new fabric.IText('32=9', {
  styles: {
    0: { // 第1行
      1: { // 第2個字元
        deltaY: -14, // 向下偏移
        fontSize: 24, // 設定字型大小
      }
    }
})
複制代碼           

複制

本例展示的是 3的平方等于9，要設定

deltaY

為負值。

deltaY

的作用是定義文本基線，基線向上移動就設定正值，向下移動就設定負值，預設是0 。

styles

的設定比較特殊，要針對某個字的話，需要通過行号和字元下标來定位。

行号和字元下标都是從0開始，和

js

的數組一樣。

IText

換行是使用

\n

來操作。

本例隻有1行，是以行号為0。

2

所在的位置下标是

1

。

如果對這方面設定不太了解的話，可以看看 Fabric.js IText設定指定字元顔色和背景色。

下标

const iText = new fabric.IText('H2O', {
  styles: {
    0: {
      1: {
        deltaY: 0,
        fontSize: 24
      }
    }
  }
})
複制代碼           

複制

在本例中，下标我并不打算向下偏移，因為這樣看起來不是那麼好看，是以我隻是設定了

fontSize

為24，将字号改小一點了。

總結

其實本文設定上标和下标的方法都是一樣的，主要流程是以下3步：

1. 通過行号和文字下标找到對應的字元
2. 通過

   deltaY

   設定指定字元的文本基線
3. 修改

   fontSize

   ，讓指定字元的字号比其他字元小一點

完成以上3步就能實作上标和下标的功能。

除了上述方式，其實還有另一種方式設定上标和下标的，但那種方式的應用場景稍微有點不同，下一篇再說說那種方法。

源碼倉庫

⭐Fabric IText 上标和下标