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

Wie stelle ich die Deckkraft eines Kreises mit FabricJS ein?

WBOYnach vorne: 2023-09-03 17:17:07521Durchsuche

如何使用 FabricJS 设置圆的不透明度？

In diesem Tutorial lernen wir, wie man die Deckkraft eines Kreises mit FabricJS festlegt. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, erstellen wir eine Instanz der Fabric.Circle-Klasse und fügen sie der Leinwand hinzu. Wir können das kreisförmige Objekt anpassen, indem wir eine Füllfarbe hinzufügen, seine Ränder entfernen und sogar seine Abmessungen ändern. Ebenso können wir die Eigenschaft opacity verwenden, um ihre Deckkraft zu ändern.

Syntax

new fabric.Circle({ opacity: Number }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das zusätzliche Anpassungen für unsere Kreise ermöglicht. Mit diesem Parameter ist es möglich, die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften zu ändern, die mit dem Objekt verknüpft sind, für das Opacity ein Attribut ist

Optionsschlüssel

Opacity - diese Eigenschaft akzeptiert Zahlen Ermöglicht uns, die Deckkraft des Objekts zu steuern. Der Standardwert des Opazitätsattributs ist 1.

Beispiel 1

Standardaussehen eines kreisförmigen Objekts

Sehen wir uns einen Codeausschnitt an, um zu sehen, wie unser kreisförmiges Objekt aussieht, wenn der Standardwert der Eigenschaft opacity verwendet wird.

<!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>Setting the opacity of Circle using FabricJS</h2>
      <p>Here we haven&#39;t used the <b>opacity</b> property, but by default, it is set to 1. This is the default appearance. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#ff1493"
         });

         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Beispiel 2

Übergabe der Opacity-Eigenschaft als Schlüssel

In diesem Beispiel werden wir sehen, wie die Zuweisung eines Werts zur Opacity-Eigenschaft die Deckkraft eines kreisförmigen Objekts in unserer Leinwand ändert. Hier verwenden wir 0,3 als Deckkraft, wodurch unser rundes Objekt halbtransparent statt völlig undurchsichtig aussieht.

<!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>Setting the opacity of Circle using FabricJS</h2>
      <p>Here we have set the <b>opacity</b> at 0.3, which is why the circle appears dull. </p>
      <canvas id="canvas"></canvas>
   
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#ff1493",
            opacity: 0.3
         });

         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

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

Stellungnahme：

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

Vorheriger Artikel：Praxisnahe testgetriebene EntwicklungsmethodenNächster Artikel：Praxisnahe testgetriebene Entwicklungsmethoden

In Verbindung stehende Artikel

Mehr sehen