Fabric. JS dynamically set font size

Brief introduction

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

<br>

This article USES the Fabric.js Of IText demonstration . If you don't understand Fabric.js , I recommend you to read 《Fabric.js From entry to mastery 》.

<br>

A picture is worth a thousand words , Look at the pictures before we write the composition ~

<br>

<br>

analysis

demand

The following functional requirements can be seen from the above figure ：

1. The font size can be modified only after the text is selected
2. Overall modification of font size
3. Modify the font size of the selected words , If it is not selected, it will not be modified

<br>

Solutions

1. Get the selected text ：canvas.getActiveObject() .
2. Whether to select only part of the text ：
   1. I use the editing status to determine whether only part of the text is selected ：isEditing .
   2. Change the style of the selected text ：setSelectionStyles({...}) .
3. modify fontSize attribute .
4. If it is a full text modification , It is also necessary to determine whether some characters are set in themselves fontSize , If the text is set by itself fontSize , The weight set in the full text is not as high as that set independently .

<br>

<br>

code

<input type="range" min="5" max="150" value="40" id="size" onchange="changeSize(value)"><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script><script>  const canvas = new fabric.Canvas('c')  const iText = new fabric.IText('hello world')  canvas.add(iText)  function changeSize(value) {    let activeTxt = canvas.getActiveObject()    if (!activeTxt) return    if (activeTxt.isEditing) {      //  Edit state       activeTxt.setSelectionStyles({ 'fontSize': value})    } else {      activeTxt.fontSize = value      let s = activeTxt.styles      //  Traversing rows and columns       for(let i in s) {        for (let j in s[i]) {          s[i][j].fontSize = value //  Set the font size for each word         }      }      activeTxt.dirty = true    }    canvas.renderAll()  }</script>

Use isEditing Judge whether to enter the editing status , I modify the font size according to whether there is selected text in the editing state .

In the end 2 Layer cycle ：

for(let i in s) {  for (let j in s[i]) {    s[i][j].fontSize = value  }}

Layer 1 cycle i Is a traversal of the number of rows ; The second cycle j Is the traversal of the current line of text .

This is because if only setSelectionStyles Setting the font size cannot override the setting of each word itself fontSize . So it still needs to be cycled , Make sure every word is correct .

<br>

The example of setting font size can also be used in Superscript and Subscript in , such as 《Fabric.js The use of superscripts and subscripts 》 The usage in a passage . Superscript and subscript are applicable to the combination of mathematical formulas and chemical symbols .

<br>

<br>

Code warehouse

IText Dynamically modify font size

<br>

<br>

Recommended reading

《Fabric.js Activate the input box 》

《Fabric.js Output reduced JSON》

《Fabric.js Zoom canvas 》

《Fabric.js Lock background image , Not affected by zooming and dragging 》 give the thumbs-up + Focus on + Collection = Learned to