Comment définir le rayon horizontal et vertical d'une ellipse à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir le rayon horizontal et vertical d'une ellipse à l'aide de FabricJS ?

PHPz

Libérer： 2023-09-12 09:25:02

avant

608 Les gens l'ont consulté

如何使用 FabricJS 设置椭圆的水平和垂直半径？

Dans ce tutoriel, nous apprendrons comment définir le rayon horizontal et vertical d'une ellipse à l'aide de FabricJS. L'ovale est l'une des différentes formes fournies par FabricJS. Afin de créer une ellipse, nous devons créer une instance de la classe Fabric.Ellipse et l'ajouter au canevas. Nous pouvons personnaliser l'objet ellipse en spécifiant sa position, sa couleur, son opacité et sa taille. Cependant, les propriétés les plus importantes sont rx et ry, qui permettent de préciser les rayons horizontal et vertical de l'ellipse.

Syntaxe

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

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> offrant une personnalisation supplémentaire à notre ellipse. Grâce à ce paramètre, il est possible de modifier la couleur, le curseur, la largeur du trait et bien d'autres propriétés liées aux objets avec les propriétés rx et ry.

clé d'option

rx - Cette propriété accepte une valeur < em>numérique. La valeur attribuée détermine le rayon horizontal de l'objet ellipse.
ry - Cette propriété accepte une valeur < em>numérique. La valeur attribuée détermine le rayon vertical de l'objet ellipse.

Exemple 1Apparence par défaut lorsque

rx et ry ne sont pas utilisés

Le code suivant montre comment un objet ellipse apparaîtra lorsque la propriété rx et ry n'est pas utilisée. Dans cet exemple, nous pouvons voir que nous avons utilisé une couleur de remplissage pour découvrir l'ellipse, qui est invisible car nous ne lui avons pas attribué de rayon horizontal et vertical.

<!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>Setting the horizontal and vertical radius of an Ellipse using FabricJS</h2>
      <p>Here we are getting a blank output because we have not assigned any horizontal and vertical radius.</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: 50,
            fill: "red",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Copier après la connexion

Exemple 2

Passer les attributs rx et ry comme clés

Dans cet exemple, nous transmettons respectivement les valeurs 100 et 70 aux attributs rx et ry. Notre objet ellipse a donc un rayon horizontal de 100 pixels et un rayon vertical de 70 pixels.

<!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 set the horizontal and vertical radius of Ellipse using FabricJS?</h2>
      <p>Here we have supplied the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. Hence we are getting an ellipse of a definite dimension. </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: 50,
            rx: 100,
            ry: 70,
            fill: "red",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Copier après la connexion

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!