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

Wie stelle ich die Deckkraft eines Rechtecks mit FabricJS ein?

WBOYnach vorne: 2023-09-21 08:01:091232Durchsuche

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

In diesem Tutorial lernen wir, wie man die Deckkraft eines Rechtecks mit FabricJS festlegt. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. um eine zu erstellen Rechteck müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und hinzufügen

Wir können das rechteckige 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.Rect({ opacity: Number }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Rahmenbreite und viele andere Eigenschaften ändern, die sich auf Objekte beziehen, deren Deckkraft ein Attribut ist.

Option Key

opacity – Diese Eigenschaft akzeptiert eine Number, mit der wir die Deckkraft des Objekts steuern können. Der Standardwert des Opazitätsattributs ist 1.

Beispiel 1

Standardaussehen eines rechteckigen Objekts

Sehen wir uns ein Codebeispiel an, um zu sehen, wie unser rechteckiges Objekt mit dem Standardwert der Eigenschaft opacity aussieht. In diesem Beispiel übergeben wir keinen Deckkraftschlüssel an die Klasse, wie unten gezeigt Die Deckkraft des rechteckigen Objekts auf der Leinwand. Hier verwenden wir 0,3 als Deckkraft Dadurch erscheint unser rechteckiges Objekt eher halbtransparent als völlig undurchsichtig.

<!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 a rectangle object</h2>
   <p>You can see our rectangle is fully opaque</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 rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         padding: 9,
         stroke: "#191970",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie stelle ich die Deckkraft eines Rechtecks 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：JavaScript-Programm zur Berechnung der Häufigkeit von Array-ElementenNächster Artikel：JavaScript-Programm zur Berechnung der Häufigkeit von Array-Elementen

In Verbindung stehende Artikel

Mehr sehen