Heim > Artikel > Web-Frontend > Wie füge ich mit FabricJS Schatten zum Dreieck hinzu?

Wie füge ich mit FabricJS Schatten zum Dreieck hinzu?

王林nach vorne: 2023-09-04 09:21:13644Durchsuche

如何使用 FabricJS 向三角形添加阴影？

In diesem Tutorial erfahren wir, wie man mit FabricJS einen Schatten zu einem Dreieck hinzufügt. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen.

Unser Dreiecksobjekt kann auf viele Arten angepasst werden, z. B. durch Ändern seiner Abmessungen, Hinzufügen einer Hintergrundfarbe oder sogar Hinzufügen eines Schattens. Mithilfe der Shadow-Eigenschaft können wir dem Dreieck einen Schatten hinzufügen.

Syntax

new fabric.Triangle({ shadow : fabric.Shadow }: Object)

Parameter

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

Optionstasten

Shadow – Diese Eigenschaft akzeptiert ein fabric.Shadow-Objekt, mit dem wir unserem Dreiecksobjekt einen Schatten hinzufügen können.

Beispiel 1

Übergabe des Shadow-Objekts an die Shadow-Eigenschaft

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie der Shadow-Eigenschaft ein Wert zugewiesen wird, um einem Dreiecksobjekt einen Schatten hinzuzufügen. Zuerst müssen wir eine neue fabric.Shadow-Instanz erstellen und diese Instanz dann unserer shadow-Eigenschaft zuweisen.

<!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 shadow object to the shadow property</h2>
   <p>You can see that an orange shadow has been added to the triangle</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "orange",
         blur: 20,
      });

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 70,
         width: 90,
         height: 80,
         fill: "#228b22",
         stroke: "#d8e4bc",
         strokeWidth: 7,
         shadow: shadow,
      });

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

Beispiel 2

Übergabe von RGBA-Werten an das Schattenobjekt

Wir können den Schatten auch anpassen und ihm ein unscharfes Aussehen verleihen, indem wir RGBA-Werte angeben, die Rot, Grün, Blau und Alpha darstellen. Alpha bestimmt die Deckkraft der Farbe.

<!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 an rgba value to the shadow object</h2>
   <p>You can see the shadow created using RGBA colour value</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "rgba(139,0,139,0.8)",
         blur: 20,
      });

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 70,
         width: 90,
         height: 80,
         fill: "#228b22",
         stroke: "#d8e4bc",
         strokeWidth: 7,
         shadow: shadow,
      });

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

Das obige ist der detaillierte Inhalt vonWie füge ich mit FabricJS Schatten zum Dreieck hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

值传递对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Vergleich von 4 Möglichkeiten zum Iterieren von Arrays in JavaScriptNächster Artikel：Vergleich von 4 Möglichkeiten zum Iterieren von Arrays in JavaScript

In Verbindung stehende Artikel

Mehr sehen