Maison > Article > interface Web > Comment définir la hauteur d'une ellipse à l'aide de FabricJS ?
Dans ce tutoriel, nous apprendrons comment définir la hauteur d'une 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. Nous pouvons manipuler l'objet ellipse en modifiant sa position, son opacité, son trait et sa taille. FabricJS nous permet de contrôler la taille des objets en utilisant les propriétés width et height.
new fabric.Ellipse({ height: Number }: Object)
Options (facultatif) - Ce paramètre est un Objet offrant une personnalisation supplémentaire à notre ellipse. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et bien d'autres propriétés liées à l'objet dont hauteur est la propriété.
Hauteur - Cette propriété accepte des chiffres strong> nous permettant de préciser la hauteur de l'objet. La valeur attribuée détermine la hauteur.
heightComportement par défaut de la propriété
Prenons un exemple pour comprendre le comportement par défaut de la propriété height.
<!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 height of an Ellipse using FabricJS?</h2> <p>Here we have set the dimensions of the ellipse by passing the horizonal and vertical radius, <b>rx</b> and <b>ry</b>. We have not used the <b>height</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({ left: 100, top: 100, fill: "white", rx: 100, ry: 60, stroke: "#c154c1", strokeWidth: 5, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Passer l'attribut height comme clé
Étant donné que la taille de l'ellipse est déterminée par son rayon horizontal et vertical, sa taille ne changera 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>How to set the height of an Ellipse using FabricJS?</h2> <p>There is no change in the dimensions of the ellipse even though we have used the <b>height</b> property. This is because the dimensions are controlled by the horizontal and vertical radius, <b>rx</b> and <b>ry</b>. </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({ top: 100, left: 100, fill: "white", rx: 100, ry: 60, height: 90, stroke: "#c154c1", 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!