关于前端:Fabricjs-IText-上标和下标

本文简介

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

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

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

举荐浏览

👍《Fabric.js IText 设置指定字符色彩和背景色》

👍《Fabric.js 圆形笔刷》

👍《Fabric.js 橡皮擦的用法（蕴含复原性能）》

👍《Fabric.js 自在绘制椭圆》

👍《Fabric.js 笔刷到底怎么用？》

👍《abric.js 右键菜单》

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