Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2023-09-06 16:25:09
avant
1392 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

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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal