Heim > Artikel > Web-Frontend > Wie füge ich mit FabricJS Objekte zur Leinwand hinzu?

Wie füge ich mit FabricJS Objekte zur Leinwand hinzu?

WBOYnach vorne: 2023-09-06 16:25:091386Durchsuche

如何使用 FabricJS 将对象添加到画布？

In diesem Artikel verwenden wir die Methode add, um Objekte zur Leinwand hinzuzufügen. Nachdem wir die Leinwand erstellt haben, können wir sie mit verschiedenen in FabricJS verfügbaren Objekten füllen, z. B. fabric.Circle, fabric.Ellipse oder fabric.Line usw.

Syntax

canvas.add(object: fabric.Object);

Parameter

Object - Der Parameter ist vom Typ fabric.Object und speichert das Objekt

Beispiel 1: Erstellen Sie eine Instanz des Objekts in canvas.add()

Stattdessen ruft Creation zunächst eine Instanz des Objekts ab und rendert sie dann mit der Methode add() auf der Leinwand, was wir direkt in der Methode add() tun können. Hier ist ein Beispiel zur Veranschaulichung –

<!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>
   <div style="padding: 10px; font-weight: bold">
      How to add an object to the canvas using FabricJS
   </div>

   <canvas
      id="canvas"
      width="500"
      height="300"
      style="border: 2px solid #000000">
   </canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.add(
         new fabric.Circle({
            radius: 40,
            fill: "#9370db",
            top: 100,
            left: 100,
         })
      );
   </script>
</body>
</html>

Output

Wie füge ich mit FabricJS Objekte zur Leinwand hinzu?

Beispiel 2: Erstellen Sie ein Objekt und fügen Sie es dann zur Leinwand hinzu

In diesem Beispiel sehen wir, wie man ein Objekt mit der Klasse Fabric.Triangle erstellt Dreieckiges Objekt und fügen Sie es der Leinwand hinzu.

<!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>
   <div style="padding: 10px; font-weight: bold">
      How to add an object to the canvas using FabricJS
   </div>

   <canvas id="canvas" width="500" height="300" style="border: 2px solid #000000">
</canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      // Creating an instance of the fabric.Triangle class
      var triangle = new fabric.Triangle({
         width: 60,
         height: 70,
         fill: "#87a96b",
         left: 30,
         top:20
      });
      // Adding it to the canvas
      canvas.add(triangle);
   </script>
</body>
</html>

Ausgabe

Wie füge ich mit FabricJS Objekte zur Leinwand hinzu?

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

Object 对象 canvas fabric

Stellungnahme：

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

Vorheriger Artikel：Vertiefen Sie Ihr Verständnis von Webpack: Teil 2Nächster Artikel：Vertiefen Sie Ihr Verständnis von Webpack: Teil 2

In Verbindung stehende Artikel

Mehr sehen