Comment définir la position d'une ellipse depuis la gauche à l'aide de FabricJS ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-09-14 19:37:02

avant

1287 Les gens l'ont consulté

如何使用 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)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un Objet< /em> 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>  <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>
Copier après la connexion
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>  <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>
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!