Maison >interface Web >js tutoriel >Comment calculer la hauteur d'un caractère à une position donnée dans le texte à l'aide de FabricJS ?
Dans ce tutoriel, nous apprendrons comment calculer la hauteur de ligne à l'index de ligne souhaité dans le texte à l'aide de FabricJS. Nous pouvons afficher du texte sur le canevas en ajoutant une instance de Fabric.Text. Non seulement il nous permet de déplacer, redimensionner et modifier les dimensions du texte, mais il fournit également des fonctionnalités supplémentaires telles que l'alignement du texte, la décoration du texte, la hauteur de ligne, qui sont disponibles respectivement via les propriétés textAlign, underline et lineHeight. Nous pouvons également calculer la hauteur de ligne à l'index de ligne souhaité à l'aide de la méthode getHeightOfLine.
getHeightOfLine(lineIndex: Number)
lineIndex - Ce paramètre accepte Number comme valeur. La valeur donnée détermine l'indice de la ligne dont nous voulons calculer la hauteur.
Utilisez la méthode getHeightOfLine
Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getHeightOfLine. Dans ce cas, la hauteur de la ligne à l'index de la ligne 1 sera affichée dans la console.
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Using the getHeightOfLine method</h2> <p>You can open console from dev tools and see that the height of line is being displayed in the console </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a text object var text = new fabric.Text("Add sampletext here", { width: 300, fill: "green", fontWeight: "bold", }); // Add it to the canvas canvas.add(text); // Using getHeightOfLine method console.log("The height of line is", text.getHeightOfLine(1)); </script> </body> </html>
Utilisez la méthode getHeightOfLine et transmettez différentes tailles de police
Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getHeightOfLine avec différentes tailles de police de 30. Dans ce cas, la hauteur de ligne à l'index de ligne 0 sera affichée avec la taille de police donnée.
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Using the getHeightOfLine method and passing a different font size</h2> <p>You can open console from dev tools and see that the height of line is being displayed in the console </p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a text object var text = new fabric.Text("Add sampletext here", { width: 300, fill: "green", fontWeight: "bold", fontSize: 30 }); // Add it to the canvas canvas.add(text); // Using getHeightOfLine method console.log("The height of line is", text.getHeightOfLine(0)); </script> </body> </html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!