Comment obtenir l'opacité d'un objet Texte à l'aide de FabricJS ?-js tutoriel-php.cn

Comment obtenir l'opacité d'un objet Texte à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-21 15:37:09

avant

649 Les gens l'ont consulté

如何使用 FabricJS 获取 Text 对象的不透明度？

Dans ce tutoriel, nous apprendrons comment obtenir l'opacité du 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. On peut également retrouver l'opacité d'un objet grâce à la méthode getObjectOpacity.

Grammaire

getObjectOpacity()

Copier après la connexion

Exemple 1

Utilisez la méthode getObjectOpacity

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getObjectOpacity. Dans ce cas, l'opacité par défaut de 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 getObjectOpacity method</h2>
   <p>You can open console from dev tools and see that the opacity 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 getObjectOpacity method
      console.log("The opacity is", text.getObjectOpacity());
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Utilisez la méthode getObjectOpacity et transmettez la propriété d'opacité

Regardons un exemple de code pour voir la sortie enregistrée lorsque la méthode getObjectOpacity est utilisée en conjonction avec la propriété opacity. Dans cet exemple, l'opacité de l'objet texte est attribuée à 0,7, donc la sortie enregistrée sera de 0,7.

<!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 getObjectOpacity method and passing the opacity property</h2>
   <p>You can open console from dev tools and see that the opacity 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",
         opacity: 0.7,
      });
      
      // Add it to the canvas
      canvas.add(text);

      // Using getObjectOpacity method
      console.log("The opacity is", text.getObjectOpacity());
   </script>
</body>
</html>

Copier après la connexion

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!