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

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

WBOYavant: 2023-09-11 17:05:091165parcourir

如何使用 FabricJS 设置三角形从左开始的位置？

Dans ce tutoriel, nous allons apprendre à définir la position d'un triangle en partant de la gauche à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe fabric.Triangle et l'ajouter au canevas.

opacité, utilisez le trait et ses dimensions pour manipuler des objets triangulaires. Vous pouvez utiliser la propriété left pour modifier la position du côté gauche.

Syntaxe

new Fabric.Triangle( { gauche : Nombre } : Objet)

Paramètres

Options /strong> - Ce paramètre est Object qui offre une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et d'autres propriétés liées à l'objet avec left

Touches d'options
left - Cette propriété accepte une valeur Number qui définit la position gauche de l'objet. Cette valeur détermine à quelle distance du bord gauche du canevas l'objet sera positionné.
Exemple 1
Placement par défaut des objets triangulaires
Regardons un code exemple pour comprendre le placement par défaut des objets triangulaires sur le canevas lorsque la position n'a pas changé
<!DOCTYPE html> <html> <tête>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> &Lt;/tête> <corps> <h2>Placement par défaut des objets triangulaires</h2> <p>Vous pouvez voir la position par défaut du triangle</p> <id de toile="canvas"></canvas> <script> //Démarre l'instance de canevas var toile = new Fabric.Canvas("toile"); toile.setWidth(document.body.scrollWidth); Canvas.setHeight(250); //Initialiser un objet triangle var triangle = nouveau Tissu.Triangle({ Haut : 50, Remplissez : "#b0e0e6", Hauteur : 90, Largeur : 100, }); //Ajoutez-le au canevas toile.ajouter(triangle); </script> </corps> </html>
Exemple 2
Passer l'attribut de gauche en tant que clé
Par exemple, nous attribuons une valeur personnalisée à l'attribut left. Puisqu'il accepte un Number, vous devez lui attribuer une valeur numérique qui représentera sa position à partir de la gauche.
<!DOCTYPE html> <html> <tête>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> &Lt;/tête> <corps> <h2>Passer la propriété de gauche comme clé</h2> <p>Vous pouvez voir que le triangle est placé à 80px de la gauche. </p> <id de toile="canvas"></canvas> <script> //Démarre l'instance de canevas var toile = new Fabric.Canvas("toile"); toile.setWidth(document.body.scrollWidth); Canvas.setHeight(250); //Initialiser un objet triangle var triangle = nouveau Tissu.Triangle({ Gauche : 80, Haut : 50, Remplissez : "#b0e0e6", Hauteur : 90, Largeur : 100, }); //Ajoutez-le au canevas toile.ajouter(triangle); </script> </corps> </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!

JavaScript ajax html Object class var JS number 对象 canvas ul li https fabric

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

Article précédent：Comment créer un tableau à partir de l'intersection de deux tableaux en JavaScript ?Article suivant：Comment créer un tableau à partir de l'intersection de deux tableaux en JavaScript ?

Articles Liés

Voir plus