Maison > interface Web > js tutoriel > Comment définir la position d'un cercle en partant de la gauche à l'aide de FabricJS ?

Comment définir la position d'un cercle en partant de la gauche à l'aide de FabricJS ?

WBOY
Libérer: 2023-09-01 13:25:02
avant
834 Les gens l'ont consulté

如何使用 FabricJS 设置圆从左开始的位置?

Dans ce tutoriel, nous apprendrons comment définir la position d'un cercle en partant de la gauche à 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. Nous pouvons manipuler l'objet circulaire en modifiant sa position, son opacité, son trait et sa taille. Vous pouvez modifier la position en partant de la gauche en utilisant la propriété left.

Syntaxe

new fabric.Circle( { left: Number }: Object)
Copier après la connexion

Paramètres

  • Options (facultatif) - Ce paramètre est un objet< /em> qui offre une personnalisation supplémentaire à notre cercle. En utilisant ce paramètre, vous pouvez modifier les propriétés liées à l'objet dont left est l'attribut, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

  • Option Key

    • Left - Cette propriété accepte un Number pour définir la position gauche de l'objet. Cette valeur détermine à quelle distance l'objet sera placé vers la gauche.

    Exemple 1

    Placement par défaut d'objets circulaires

    Regardons un exemple de code pour comprendre la position par défaut d'un objet circulaire dans le canevas lorsque sa position ne change pas.

    <!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 Circle from left using FabricJS</h2>
          <p>This is the default placement of the circle. Here 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");
             var circle = new fabric.Circle({
                fill: "white",
                radius: 100,
                stroke: "yellow",
                strokeWidth: 3
             });
             
             // Adding it to the canvas
             canvas.add(circle);
             canvas.setWidth(document.body.scrollWidth);
             canvas.setHeight(250);
          </script>
       </body>
    </html>
    Copier après la connexion

    Exemple 2

    Passer l'attribut left comme clé

    Dans cet exemple, nous attribuons une valeur personnalisée à l'attribut left. 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>Setting the position of Circle from left using FabricJS</h2>
          <p>Here we have used the <b>left</b> property and assigned it a custom value to set the position of the circle from left. </p>
          <canvas id="canvas"></canvas>
    
          <script>
             // Initiate a canvas instance
             var canvas = new fabric.Canvas("canvas");
             var circle = new fabric.Circle({
                left: 115,
                fill: "white",
                radius: 100,
                stroke: "yellow",
                strokeWidth: 3,
             });
    
             // Adding it to the canvas
             canvas.add(circle);
             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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal