Maison >interface Web >js tutoriel >Comment ajouter des objets au canevas à l'aide de FabricJS ?

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

WBOYavant: 2023-09-06 16:25:091417parcourir

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

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>

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>

sortie

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Object 对象 canvas fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Approfondir votre compréhension de Webpack : partie 2Article suivant：Approfondir votre compréhension de Webpack : partie 2

Articles Liés

Voir plus