为了账号安全,请及时绑定邮箱和手机立即绑定

Fabric.js IText 上标和下标

本文简介

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


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


Fabric.js 中,文本元素有 TextITextTextbox 。本文主要讲解 IText 的上标和下标如何实现。在 TextTextbox 中的实现方式也是一样的。



上标

file

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



下标

file

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

在本例中,下标我并不打算向下偏移,因为这样看起来不是那么好看,所以我只是设置了 fontSize 为24,将字号改小一点了。



总结

其实本文设置上标和下标的方法都是一样的,主要流程是以下3步:

  1. 通过行号和文字下标找到对应的字符
  2. 通过 deltaY 设置指定字符的文本基线
  3. 修改 fontSize ,让指定字符的字号比其他字符小一点

完成以上3步就能实现上标和下标的功能。


除了上述方式,其实还有另一种方式设置上标和下标的,但那种方式的应用场景稍微有点不同,下一篇再说说那种方法。



源码仓库



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消