当前位置：网站首页>Fabric. JS iText superscript and subscript

Fabric. JS iText superscript and subscript

2022-07-02 05:18:00 【Director of Moral Education Department】

Brief introduction

give the thumbs-up + Focus on + Collection = Learned to

For projects in Mathematical Chemistry ,“ Superscript ” and “ Subscript ” Functions are commonly used , such as Power 、 chemical element Equivalent expression , Both need superscript or subscript .

stay Fabric.js in , Text elements have Text 、IText and Textbox . This article mainly explains IText How to implement superscript and subscript of . stay Text and Textbox The same is true of .

Superscript

file

const iText = new fabric.IText('32=9', {  styles: {    0: { //  The first 1 That's ok       1: { //  The first 2 Characters         deltaY: -14, //  Offset down         fontSize: 24, //  Set font size       }    }})

This example shows 3 The square of is equal to 9, To set up deltaY negative .

deltaY Is used to define the text baseline , Moving the baseline upward sets a positive value , Move down to set a negative value , The default is 0 .

styles The setting of is quite special , For a word , You need to locate by line number and character subscript .

Line number and Character subscript from 0 Start , and js It's the same as an array of .

IText Wrap is using \n To operate .

In this case, only 1 That's ok , So the line number is 0.

2 Where the subscript is 1.

If you don't understand this aspect , You can see Fabric.js IText Set the specified character color and background color .

Subscript

file

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

In this case , I am not going to shift the subscript downward , Because it doesn't look so good , So I just set fontSize by 24, The font size has been reduced .

summary

In fact, the method of setting superscript and subscript in this article is the same , The main process is as follows 3 Step ：

Find the corresponding character by line number and text subscript
adopt deltaY Sets the text baseline for the specified character
modify fontSize , Make the font size of the specified character smaller than that of other characters

Complete the above 3 Step can realize the function of superscript and subscript .

In addition to the above , In fact, there is another way to set superscript and subscript , But the application scenario of that method is a little different , The next article will talk about that method .