Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS eine Leinwand mit einem Dreieck?

Wie erstelle ich mit FabricJS eine Leinwand mit einem Dreieck?

WBOYnach vorne: 2023-09-15 12:33:03655Durchsuche

如何使用 FabricJS 创建带有 Triangle 的画布？

In diesem Tutorial lernen wir, wie man mit FabricJS eine Leinwand mit einem Dreiecksobjekt erstellt. 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.

Syntax

new fabric.Triangle({ width: Number, height: Number }: Object)

Parameter

Optionen (optional)− Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Dreiecksobjekt beziehen, wie z. B. Farbe, Cursor, Strichstärke und seine Eigenschaften width und height .

Optionstaste

Width − Diese Eigenschaft akzeptiert eine Zahl, die die Breite des Objekts angibt. Der Standardwert ist 100.
Height – Diese Eigenschaft akzeptiert eine Number, die die Höhe des Objekts angibt. Der Standardwert ist 100.

Beispiel 1

Erstellen Sie eine Fabric.Triangle()-Instanz und fügen Sie sie der Leinwand hinzu. strong>

Sehen wir uns ein Codebeispiel an, um zu sehen, wie Sie der Leinwand ein Dreieck hinzufügen. Hier erstellen wir ein Objekt mit einer Breite von 100 Pixel und einer Höhe von 70 Pixel. Zusätzlich haben wir als Füllfarbe die Farbe „Orange“ verwendet.

<!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>Creating an instance of fabric.Triangle() and adding it to our canvas</h2>
   <p>You can move around the triangle and interact with it</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: 55,
         top: 60,
         width: 100,
         height: 70,
         fill: "orange",
      });

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

Beispiel 2

Verwenden der Set-Methode zum Manipulieren eines Triangle-Objekts

In diesem Beispiel verwenden wir die Set-Methode als Setzer des Werts. Alle Eigenschaften in Bezug auf Strich, Strichbreite, Winkel, Skalierung, Drehung usw. können mit dieser Methode geändert werden.

<!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>Manipulating the Triangle object by using the set method</h2>
   <p>You can move around the triangle and interact with it</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();

      // Set the properties
      triangle.set("height", 70);
      triangle.set("width", 100);
      triangle.set("stroke", "#2a52be");
      triangle.set("strokeWidth", 5);
      triangle.set("fill", "#d9603b");
      triangle.set("top", 60);
      triangle.set("left", 55);

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS eine Leinwand mit einem Dreieck?. 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 zum Ermitteln des Bereichsdurchschnitts im ArrayNächster Artikel：JavaScript-Programm zum Ermitteln des Bereichsdurchschnitts im Array

In Verbindung stehende Artikel

Mehr sehen