Wie füge ich mit FabricJS Objekte zur Leinwand hinzu?-js-Tutorial-php.cn

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

WBOY

Freigeben： 2023-09-06 16:25:09

nach vorne

1372 Leute haben es durchsucht

如何使用 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);

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!