Maison > Article > interface Web > Comment obtenir le style de texte actuellement sélectionné à l'aide de FabricJS ?

Comment obtenir le style de texte actuellement sélectionné à l'aide de FabricJS ?

WBOYavant: 2023-08-24 11:33:10904parcourir

如何使用 FabricJS 获取文本中当前选择的样式？

Dans ce tutoriel, nous apprendrons comment obtenir le style du texte actuellement sélectionné à 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 trouver les styles actuellement sélectionnés à l'aide de la méthode getSelectionStyles.

Grammaire

getSelectionStyles(startIndexopt, endIndexopt, completeopt)

Paramètres

startIndexopt - Ce paramètre accepte un number, indiquant l'index de départ pour obtenir le style.
endIndexopt - Ce paramètre accepte un Number, qui représente l'index de fin d'obtention du style.
completeopt - Ce paramètre accepte une valeur boolean, qui détermine s'il faut obtenir le style complet.

Exemple 1

Utilisez la méthode getSelectionStyles

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getSelectionStyles. Dans ce cas, les styles du 0ème index au 4ème index seront affichés.

<!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 getSelectionStyles method</h2>
   <p>You can open console from dev tools and see that the value 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 getSelectionStyles method
      console.log("The style is", text.getSelectionStyles(0, 5, true));
   </script>
</body>
</html>

Exemple 2

Utilisez la méthode getSelectionStyles et transmettez différentes valeurs

Regardons un exemple de code pour voir la sortie enregistrée lorsque la méthode getSelectionStyles reçoit différentes valeurs. Dans ce cas, la sortie enregistrée contiendra les styles de caractères aux 4ème et 5ème index.

<!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 getSelectionStyles method and passing different values</h2>
   <p>You can open console from dev tools and see that the value 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",
         styles: {
            0: {
               5: {
                  fontSize: 55,
                  fill: "blue",
                  fontStyle: "oblique",
               },
               4: {
                  fontSize: 45,
                  fill: "pink",
                  fontWeight: "bold",
               },
            },
         },
      });

      // Add it to the canvas
      canvas.add(text);

      // Using getSelectionStyles method
      console.log("The style is", text.getSelectionStyles(4, 6, true));
   </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!

number fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Utiliser JavaScript pour améliorer visuellement votre site Web ?Article suivant：Utiliser JavaScript pour améliorer visuellement votre site Web ?

Articles Liés

Voir plus