Wie erhalte ich die Deckkraft eines Textobjekts mit FabricJS?-js-Tutorial-php.cn

Wie erhalte ich die Deckkraft eines Textobjekts mit FabricJS?

WBOY

Freigeben： 2023-09-21 15:37:09

nach vorne

648 Leute haben es durchsucht

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Deckkraft von Text erreichen. Wir können Text auf der Leinwand anzeigen, indem wir eine Instanz von Fabric.Text hinzufügen. Es ermöglicht uns nicht nur das Verschieben, Skalieren und Ändern der Textabmessungen, sondern bietet auch zusätzliche Funktionen wie Textausrichtung, Textdekoration und Zeilenhöhe, die über die Eigenschaften textAlign, underline bzw. lineHeight verfügbar sind. Wir können die Deckkraft eines Objekts auch mithilfe der Methode getObjectOpacity ermitteln.

Grammatik

getObjectOpacity()

Nach dem Login kopieren

Beispiel 1

Verwenden Sie die getObjectOpacity-Methode

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der getObjectOpacity-Methode zu sehen. In diesem Fall wird in der Konsole die Standard-Deckkraft von 1 angezeigt.

<!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>

Nach dem Login kopieren

Beispiel 2

Verwenden Sie die Methode getObjectOpacity und übergeben Sie die Eigenschaft opacity

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die getObjectOpacity-Methode in Verbindung mit der opacity-Eigenschaft verwendet wird. In diesem Beispiel wird der Deckkraft des Textobjekts 0,7 zugewiesen, sodass die aufgezeichnete Ausgabe 0,7 beträgt.

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erhalte ich die Deckkraft eines Textobjekts mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!