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

Comment créer un canevas avec une ellipse en utilisant FabricJS ?

WBOYavant: 2023-09-12 23:05:021293parcourir

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

Dans ce tutoriel, nous allons apprendre à créer un canevas avec des objets Ellipse à l'aide de FabricJS. L'ovale est l'une des différentes formes fournies par FabricJS. Pour créer une ellipse, nous allons créer une instance de la classe Fabric.Ellipse et l'ajouter au canevas.

Syntaxe

new fabric.Ellipse({ rx: Number, ry: Number }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre ellipse. Utilisez ce paramètre pour modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées à l'objet ellipse, où rx et ry sont des propriétés de l'objet ellipse.

clé d'option

rx - Cette propriété accepte un numéro qui détermine le rayon horizontal de l'ellipse. Si nous ne spécifions pas de rayon horizontal, l'ellipse n'apparaîtra pas sur le canevas.
ry - Cette propriété accepte un numéro qui détermine le rayon vertical de l'ellipse. Si nous ne spécifions pas de rayon vertical, l'ellipse n'apparaîtra pas sur le canevas.

Exemple 1

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

Regardons un exemple de la façon d'ajouter une ellipse à un canevas. Ici, nous créons un objet avec un rayon horizontal de 80 pixels et un rayon vertical de 50 pixels. Nous utilisons du bleu ciel pour remplir l'objet avec la valeur hexadécimale #87ceeb.

<!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>How to create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have created an ellipse object and set it over a canvas.</p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 100,
            fill: "#87ceeb",
            rx: 80,
            ry: 50,
         });
         
         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Utilisation de la méthode set pour manipuler un objet Ellipse

Dans cet exemple, nous utilisons la méthode set, qui est un setter pour les valeurs. 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>How to create a canvas with an ellipse using FabricJS?</h2>
      <p>Here we have used the <b>set</b> method to create an ellipse object over the canvas. </p>
      <canvas id="canvas"></canvas>
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         
         // Initiate an Ellipse instance
         var ellipse = new fabric.Ellipse();
         
         // Using set to set the properties
         ellipse.set("rx", 90);
         ellipse.set("ry", 40);
         ellipse.set("fill", "#1e90ff");
         ellipse.set({
            stroke: "rgba(245,199,246,0.5)",
            strokeWidth: 6
         });
         ellipse.set("left", 150);
         ellipse.set("top", 90);
         
         // Adding it to the canvas
         canvas.add(ellipse);
         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!

对象 li fabric

Déclaration：

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

Article précédent：Comment importer des fichiers SVG en JavaScript ?Article suivant：Comment importer des fichiers SVG en JavaScript ?

Articles Liés

Voir plus