持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 10 天，点击查看活动详情

本文简介

点赞 + 关注 + 收藏 = 学会了

对于数学化学这方面的项目，“上标” 和 “下标” 功能是很常用的，比如 次方 、化学元素 等表达方式，都需要用到上标或者下标。

在 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 上标和下标