suchen

Heim >Web-Frontend >js-Tutorial >Wie füge ich mit FabricJS einen Strich zu einem Rechteck hinzu?

Wie füge ich mit FabricJS einen Strich zu einem Rechteck hinzu?

王林
王林nach vorne
2023-09-06 12:01:07955Durchsuche

如何使用 FabricJS 向矩形添加描边？

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

Unser rechteckiges Objekt kann auf viele Arten angepasst werden, z. B. durch Ändern seiner Abmessungen, Hinzufügen einer Hintergrundfarbe oder Ändern der Farbe der um das Objekt herum gezeichneten Linien. Wir können dies tun, indem wir das Attribut Stroke verwenden.

Syntax

new fabric.Rect({ stroke : String }: Object)

Parameter

  • Optionen (optional) – Dieser Parameter ist ein Objekt , das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, für das Stroke ein Attribut ist.

Optionsschlüssel

  • Stroke – Diese Eigenschaft akzeptiert einen String und bestimmt die Farbe des Rahmens dieses Objekts

Schauen wir uns ein Codebeispiel an, um zu verstehen, wie ein rechteckiges Objekt ist wird angezeigt, wenn die Eigenschaft

lines

verwendet wird. Hexadezimale Farbcodes beginnen mit „#“, gefolgt von einer sechsstelligen Zahl, die die Farbe darstellt. In diesem Fall haben wir „#000080“ verwendet, was Marineblau ist. 

<!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 stroke as key with a hexadecimal value</h2>
   <p>You can see the navy blue border around the rectangle</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: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "#000080",
         strokeWidth: 9,
      });

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

Rgba-Wert an das Attribut „Linien“ übergeben

In diesem Beispiel sehen wir, wie wir dem Strichattribut einen „rgba“-Wert zuweisen. Anstelle von hexadezimalen Farbcodes können wir

RGBA

-Werte verwenden, die für Rot, Grün, Blau und Alpha stehen. Der Alpha-Parameter gibt die Deckkraft der Farbe an. In diesem Beispiel haben wir einen RGBA-Wert von

(0,0,128,0,8) verwendet, der Marineblau mit einer Deckkraft von 0,8 ist. 

<!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 stroke property</h2>
   <p>You can see the colour added using rgba to the rectangle&#39;s stroke</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: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "rgba(0,0,128,0.8)",
         strokeWidth: 9,
      });

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

Das obige ist der detaillierte Inhalt vonWie füge ich mit FabricJS einen Strich zu einem Rechteck hinzu?. 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：Wie erstelle ich mit FabricJS ein Textfeld mit Hintergrundfarbe?Nächster Artikel：Wie erstelle ich mit FabricJS ein Textfeld mit Hintergrundfarbe?

In Verbindung stehende Artikel

Mehr sehen