Tissu. JS définit dynamiquement la taille de la police

Introduction à cet article

- Oui. + Attention + Collection = J'ai appris.

Utilisé dans cet article 

Fabric.js

 De 

IText

 Présentation.Si tu ne comprends pas encore 

Fabric.js

 ,Je vous recommande de lire 

《Fabric.jsDe l'initiation à la maîtrise》

.

Une image vaut mille mots,Regardez les photos avant d'écrire la composition~

Analyse

Besoins

La figure ci - dessus montre les exigences fonctionnelles suivantes：

• La taille de la police ne peut être modifiée tant que le texte n'est pas sélectionné

• Modifier la taille globale de la police

• Modifier la taille de police des mots sélectionnés,Ne pas modifier ceux qui ne sont pas sélectionnés

Solutions

• Obtenir le texte sélectionné：
  canvas.getActiveObject()
   .

• Si seule une partie du texte est sélectionnée：

• Je détermine si seule une partie du texte est sélectionnée en éditant l'état：
  isEditing
   .

• Modifier le style du texte sélectionné：
  setSelectionStyles({...})
   .

• Modifier 
  fontSize
   Propriétés.

• En cas de modification du texte intégral,Et si certains caractères sont définis par eux - mêmes 
  fontSize
   ,Si le texte lui - même est défini 
  fontSize
   ,Le poids du texte intégral n'est pas aussi élevé que celui du texte autonome.

Codage

<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) {
 // Modifier l'état
 activeTxt.setSelectionStyles({ 'fontSize': value})
 } else {
 activeTxt.fontSize = value
 let s = activeTxt.styles
 // Traverser les lignes et les colonnes
 for(let i in s) {
 for (let j in s[i]) {
 s[i][j].fontSize = value //  Définir la taille de la police pour chaque mot
 }
 }
 activeTxt.dirty = true
 }

 canvas.renderAll()
 }
</script>


Utiliser 

isEditing

  Déterminer si l'état d'édition est actuellement entré , Je modifie la taille de la police en fonction du texte sélectionné dans l'état d'édition .

Enfin...2Cycle des couches：

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


Cycle de la première couche 

i

  Est la traversée du nombre de lignes ;Cycle de la deuxième couche 

j

  Est la traversée du texte de la ligne courante .

C'est parce que si vous n'utilisez que  

setSelectionStyles

  Le réglage de la taille de la police ne peut pas outrepasser le réglage de chaque mot lui - même  

fontSize

 . C'est pour ça qu'il faut faire le tour. , Assurez - vous que chaque mot est modifié en place .

Un exemple de taille de police peut également être utilisé

Superscript

Et

Indice

- Oui.,Par exemple, 

《Fabric.js  Utilisation de carrés partiels pour les superscripts et les indices 》

  Utilisation dans un texte . Application de superscripts et de petits superscripts dans des scénarios tels que des formules mathématiques combinées et des symboles chimiques .

Entrepôt de code

IText  Modifier dynamiquement la taille de la police