Maison > Article > interface Web > Comment définir la position d'une ellipse depuis la gauche à l'aide de FabricJS ?

Comment définir la position d'une ellipse depuis la gauche à l'aide de FabricJS ?

WBOYavant: 2023-09-14 19:37:021258parcourir

如何使用 FabricJS 设置椭圆从左侧的位置？

Dans ce tutoriel, nous apprendrons comment définir la position d'une ellipse depuis la gauche à 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. Nous pouvons manipuler l'objet ellipse en modifiant sa position, son opacité, son trait et sa taille. La position depuis la gauche peut être modifiée à l'aide de l'attribut left.

Syntaxe

new fabric.Ellipse( { left: Number }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un Objet offrant 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 associées à l'objet dont la propriété gauche est la propriété.

Touche d'option

left - Cette propriété accepte un number qui définit la position gauche de l'objet. Cette valeur détermine à quelle distance l'objet sera placé vers la gauche.

Exemple 1

Position par défaut de l'objet ellipse

Passons en revue un exemple pour comprendre la position par défaut de l'objet ellipse dans le canevas lorsque sa position n'est pas modifiée.

<!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 position of an Ellipse from left using FabricJS</h2>
      <p>This is the default position, as we have not used the <b>left</b> property. </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({
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
         });

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

Exemple 2

Passage de l'attribut left comme clé

Dans cet exemple, nous attribuerons l'attribut left avec une valeur personnalisée. Puisqu'il accepte les chiffres, vous devez lui attribuer une valeur numérique qui représente sa position depuis la gauche.

<!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 position of Ellipse from left using FabricJS?</h2>
      <p>Notice that the circle is placed 135px away from the left, since we have used the <b>left</b> property with a custom value.</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: 135,
            fill: "white",
            rx: 80,
            ry: 50,
            stroke: "black",
            strokeWidth: 5,
         });

         // 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!

对象 fabric

Déclaration：

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

Article précédent：Comment retourner un triangle horizontalement en utilisant FabricJS ?Article suivant：Comment retourner un triangle horizontalement en utilisant FabricJS ?

Articles Liés

Voir plus