Heim > Artikel > Web-Frontend > Wie stelle ich die Deckkraft eines Bildes mit FabricJS ein?

Wie stelle ich die Deckkraft eines Bildes mit FabricJS ein?

WBOYnach vorne: 2023-08-24 23:53:10932Durchsuche

In diesem Tutorial lernen wir, wie man die Deckkraft eines Bildes mit FabricJS festlegt. uns Bildobjekte können durch Erstellen einer Instanz von fabric.Image erstellt werden. da es eines davon ist Grundelement von FabricJS, wir können es auch einfach anpassen, indem wir Eigenschaften anwenden Wie Winkel, Deckkraft usw. Um die Deckkraft eines Bildes festzulegen, verwenden wir das Attribut opacity.

Grammatik

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { opacity: Number }: Object, callback: function)

Parameter

element – Dieser Parameter akzeptiert ein HTMLImageElement, HTMLCanvasElement, HTMLVideoElement oder eine Zeichenfolge, die ein Bildelement darstellt. Die Zeichenfolge sollte eine URL sein und wird als Bild geladen.
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie den Ursprung, die Strichstärke und viele andere Eigenschaften ändern, die sich auf Bildobjekte beziehen, deren Deckkraft ein Attribut ist.
Rückruf (optional) – Dieser Parameter ist eine Funktion , die aufgerufen wird, nachdem der endgültige Filter angewendet wurde.

Wahltaste

Opazität – Diese Eigenschaft akzeptiert eine Nummer, die uns die Kontrolle ermöglicht eine Sache. Der Standardwert der Eigenschaft opacity ist 1.

Standarddarstellung des Bildobjekts

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie unser Bildobjekt mit Standardwerten aussieht DeckkraftEigenschaft. In diesem Beispiel übergeben wir keine undurchsichtigen Schlüssel, wie unten gezeigt -

<!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>Default appearance of Image object</h2>
   <p>You can see that the image object is fully opaque</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie stelle ich die Deckkraft eines Bildes mit FabricJS ein?" >
   <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: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Übergeben Sie das Attribut „Opacity“ als Schlüssel Beispiel

In diesem Beispiel werden wir sehen, wie sich die Zuweisung eines Werts zur Eigenschaft „Opazität“ ändert Die Deckkraft des Bildobjekts auf der Leinwand. Hier verwenden wir also 0,3 als Deckkraft Lässt unser Bildobjekt halbtransparent statt völlig undurchsichtig erscheinen.

<!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>Passing the opacity property as key</h2>
   <p>You can see our image object is not fully opaque</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie stelle ich die Deckkraft eines Bildes mit FabricJS ein?" >
   <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: 50,
         opacity: 0.3,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

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

字符串 number 对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie ändere ich die Schriftstärke von Text mit JavaScript?Nächster Artikel：Wie ändere ich die Schriftstärke von Text mit JavaScript?

In Verbindung stehende Artikel

Mehr sehen