Fabric. JS dynamically set font size

Brief introduction

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

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 》

.

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

analysis

demand

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

• The font size can be modified only after the text is selected

• Overall modification of font size

• Modify the font size of the selected words , If it is not selected, it will not be modified

Solutions

• Get the selected text ：
  canvas.getActiveObject()
   .

• Whether to select only part of the text ：

• I use the editing status to determine whether only part of the text is selected ：
  isEditing
   .

• Change the style of the selected text ：
  setSelectionStyles({...})
   .

• modify  
  fontSize
    attribute .

• 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 .

code

<input type=&quot;range&quot; min=&quot;5&quot; max=&quot;150&quot; value=&quot;40&quot; id=&quot;size&quot; onchange=&quot;changeSize(value)&quot;>
<canvas id=&quot;c&quot; width=&quot;300&quot; height=&quot;300&quot; style=&quot;border: 1px solid #ccc&quot;></canvas>

<script src=&quot;https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js&quot;></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 .

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 .

Code warehouse

IText  Dynamically modify font size