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.
new fabric.Ellipse( { left: Number }: Object)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é.
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.
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>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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
