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.
canvas.add(object: fabric.Object);
Object - Le paramètre est de type fabric.Object et enregistre l'objet
à 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>
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>
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!