Maison > Article > interface Web > Comment créer un canevas avec un Cercle en utilisant FabricJS ?

Comment créer un canevas avec un Cercle en utilisant FabricJS ?

WBOYavant: 2023-09-09 23:05:031232parcourir

如何使用 FabricJS 创建带有 Circle 的画布？

Dans ce tutoriel, nous allons apprendre à créer un canevas avec un objet Circle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Afin de créer un cercle, nous devons créer une instance de la classe Fabric.Circle et l'ajouter au canevas.

Syntaxe

new fabric.Circle({ radius: Number }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un Objet offrant une personnalisation supplémentaire à notre objet. Grâce à ce paramètre, il est possible de modifier des propriétés telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés liées à un cercle dont rayon est l'attribut.

Option Key

Radius - Cette propriété accepte un Number pour déterminer le rayon du cercle. Si nous ne spécifions pas de rayon, le cercle n'apparaîtra pas sur le canevas.

Exemple 1

Créez une instance de Fabric.Circle() et ajoutez-la à notre canevas

Regardons un exemple de la façon d'ajouter un cercle au canevas. Ici, nous créons un cercle d'un rayon de 50px. L'attribut Stroke représente la couleur de la bordure et la largeur du trait spécifie sa largeur. Nous remplissons notre objet d'une couleur bleu ciel, dont la valeur hexadécimale est #80daeb.

<!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>
      <h2>Creating a canvas with circle using FabricJS</h2>
         <p>Here we have created a circle of radius 50px over a canvas. In addition, we have used the <b>fill</b> and <b>stroke</b> properties to color its body and outline. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Creating an instance of the fabric.Circle class
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "#80daeb",
            stroke: "#00b7eb",
            strokeWidth: 2,
         });
         
         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Utilisez la méthode set pour faire fonctionner l'objet Circle

Dans cet exemple, nous utilisons la méthode set pour définir la valeur. Toutes les propriétés liées au trait, à la largeur du trait, au rayon, à l'échelle, à la rotation, etc. peuvent être modifiées à l'aide de cette méthode.

<!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>
      <h2>Creating a canvas with circle using FabricJS</h2>
      <p>Here we have used the <b>set</b> method to create a circle of radius 40px and then filled the object with a color. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle();
         canvas.add(circle);
         
         // Use set to set the properties
         circle.set("radius", 40);
         circle.set("fill", "green");
         circle.set({
            stroke: "rgba(133, 187, 101, 0.7)",
            strokeWidth: 4
         });
         circle.set("left", 50);
         circle.set("top", 50);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </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!

number 对象 fabric

Déclaration：

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

Article précédent：Vérification de type statique en JavaScript à l'aide de TypeScriptArticle suivant：Vérification de type statique en JavaScript à l'aide de TypeScript

Articles Liés

Voir plus