Comment ajouter des objets au canevas à l'aide de FabricJS ?-js tutoriel-php.cn

Comment ajouter des objets au canevas à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-06 16:25:09

avant

1371 Les gens l'ont consulté

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

Dans cet article, nous utiliserons la méthode add pour ajouter des objets au canevas. Après avoir créé le canevas, nous pouvons le remplir avec divers objets disponibles dans FabricJS, tels que fabric.Circle, fabric.Ellipse ou fabric.Line, etc.

Syntaxe

canvas.add(object: fabric.Object);

Copier après la connexion

Paramètres

Object - Le paramètre est de type fabric.Object et enregistre l'objet

Exemple 1 : Créer une instance de l'objet dans canvas.add()

à la place, Creation obtient d'abord une instance de l'objet, puis la restitue sur le canevas en utilisant la méthode add(), ce que nous pouvons faire directement dans la méthode add(). Voici un exemple pour illustrer -

<!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>

Copier après la connexion

Output

Comment ajouter des objets au canevas à l'aide de FabricJS ?

Exemple 2 : Créez un objet puis ajoutez-le au canevas

Dans cet exemple nous verrons comment créer un objet en utilisant la classe Fabric.Triangle Objet triangulaire et ajoutez-le au canevas.

<!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>

Copier après la connexion