Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS ein Rechteck mit Randfarbe?

Wie erstelle ich mit FabricJS ein Rechteck mit Randfarbe?

PHPznach vorne: 2023-09-09 20:53:081327Durchsuche

如何使用 FabricJS 创建带有边框颜色的矩形？

In diesem Tutorial erstellen wir mit FabricJS ein Rechteck mit einer Randfarbe. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Klasse fabric.Rect erstellen und sie der Leinwand hinzufügen.

Da FabricJS so flexibel ist, können wir unser Rechteckobjekt nach Belieben anpassen. Eine der von FabricJS bereitgestellten Eigenschaften ist borderColor, die es uns ermöglicht, die Farbe des Rahmens zu manipulieren, wenn das Objekt aktiv ist.

Syntax

new fabric.Rect({ borderColor: String }: 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, Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen borderColor ein Attribut ist.

Optionstaste

borderColor – Diese Eigenschaft akzeptiert einen String, der die Farbe des Rahmens angibt, wenn ein rechteckiges Objekt ausgewählt wird. Der Standardwert ist rgb(178.204.255).

Beispiel 1

Übergabe des borderColor-Schlüssels mithilfe eines Zeichenfolgenwerts

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie der Eigenschaft borderColor ein Wert zugewiesen wird. Wir haben der Taste borderColor den Wert „blue“ zugewiesen, der dabei hilft, bei der Auswahl eines rechteckigen Objekts einen blauen Rand zu erstellen.

<!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 borderColour key with a String value</h2>
   <p>Select the rectangle to see the border colour</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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "blue",
         padding: 9,
      });

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

Beispiel 2

Übergabe eines RGBA-Werts an den Schlüssel borderColor

Anstatt einen einfachen Farbnamen als Zeichenfolge zu übergeben, können wir auch einen RGBA-Wert verwenden, dessen Komponenten Rot, Grün, Blau und Alpha-Anteil angeben von , wobei Alpha für die Opazität steht. In diesem Beispiel haben wir rgb(128,0,128) verwendet, den RGB-Wert für Lila.

<!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 borderColor key</h2>
   <p>Select the rectangle to see the border colour</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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "rgb(128,0,128)",
         padding: 9,
      });

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS ein Rechteck mit Randfarbe?. 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：Wie drehe ich ein Rechteck mit FabricJS vertikal um?Nächster Artikel：Wie drehe ich ein Rechteck mit FabricJS vertikal um?

In Verbindung stehende Artikel

Mehr sehen