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

Wie erhalte ich die Deckkraft eines Bildobjekts mit FabricJS?

WBOY

Freigeben： 2023-08-28 16:49:09

nach vorne

1289 Leute haben es durchsucht

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

In diesem Tutorial erfahren wir, wie wir mit FabricJS die Deckkraft eines Bildes ermitteln. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um die Deckkraft eines Bildes zu ermitteln, verwenden wir die Methode getObjectOpacity. p>

Grammatik

getObjectOpacity(): Number

Nach dem Login kopieren

Verwenden Sie die Methode getObjectOpacity

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der Methode

getObjectOpacity 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 logged value is
      being displayed in the console
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using getObjectOpacity method
      console.log("The opacity is: ", image.getObjectOpacity());
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die Methode

getObjectOpacity und übergeben Sie die Eigenschaft opacity

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die Methode

getObjectOpacity in Verbindung mit der Eigenschaft opacity verwendet wird. In diesem Beispiel wird der Deckkraft des Bildobjekts 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>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         opacity: 0.7,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using getObjectOpacity method
      console.log("The opacity is: ", image.getObjectOpacity());
   </script>
</body>
</html>

Nach dem Login kopieren

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