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

Wie erstelle ich mit FabricJS ein Dreieck mit Randfarbe?

WBOYnach vorne: 2023-09-12 12:29:021395Durchsuche

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

In diesem Tutorial erstellen wir mit FabricJS ein Dreieck mit einer Randfarbe. 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.

Da FabricJS so flexibel ist, können wir unsere Dreiecksobjekte nach Belieben anpassen. Eine der von FabricJS bereitgestellten Eigenschaften ist borderColor, mit der wir die Farbe des Rahmens manipulieren können, wenn das Objekt aktiv ist.

Syntax

new fabric.Triangle({ borderColor: String }: 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 das Objekt beziehen, dessen Eigenschaft borderColor ist.

Optionstaste

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

Beispiel 1

Übergabe des borderColor-Schlüssels mithilfe eines String-Werts

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, einen blauen Rand zu erstellen, wenn ein Dreiecksobjekt ausgewählt 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>Passing borderColour key with a String value</h2>
   <p>Select the triangle 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "blue",
      });

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

Beispiel 2

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

RGBA-Wert mit Komponenten verwenden, die Rot, Grün, Blau und spezifizieren die Menge an Alpha, wobei Alpha für die Deckkraft 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 triangle 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "rgb(128,0,128)",
      });

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS ein Dreieck mit Randfarbe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String 字符串值传递对象 ul 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 richtet man ein Bild auf einer Karte mit einem dynamischen Titel in Javascript aus?Nächster Artikel：Wie richtet man ein Bild auf einer Karte mit einem dynamischen Titel in Javascript aus?

In Verbindung stehende Artikel

Mehr sehen