Comment définir l'angle d'inclinaison d'un triangle sur l'axe des x à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir l'angle d'inclinaison d'un triangle sur l'axe des x à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-05 22:37:12

avant

817 Les gens l'ont consulté

Comment définir langle dinclinaison dun triangle sur laxe des x à laide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment définir l'angle d'inclinaison sur l'axe x d'un triangle à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devrons créer une instance de la classe fabric.Triangle et l'ajouter au canevas.

Nous pouvons personnaliser notre objet triangle en modifiant sa taille, en ajoutant une couleur d'arrière-plan ou en modifiant l'angle d'inclinaison sur l'axe des x. Nous pouvons y parvenir en utilisant l'attribut skewX

Syntaxe

new fabric.Triangle({ skewX: Number }: Object )

Copier après la connexion

Paramètres

Options ;/strong> - Ce paramètre est un object À l'aide de ce paramètre, vous pouvez modifier la couleur de l'objet, le curseur, la largeur du trait et de nombreuses autres propriétés liées à la propriété skewX.

Touche d'option

skewX< strong> - Cette propriété accepte une valeur number

Exemple 1

Lorsque l'attribut skewX n'est pas appliqué

< ;p> Regardons un exemple de code pour voir à quoi ressemble notre objet triangle lorsque la propriété skewX n'est pas appliquée. Dans ce cas, notre objet triangle ne sera incliné d’aucun angle.
<!DOCTYPE html> La traduction chinoise de <html> La traduction chinoise de <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> La traduction chinoise de </head> La traduction chinoise de <body> <h2>Lorsque l'attribut skewX n'est pas appliqué</h2> <p>Par défaut, vous pouvez voir que le triangle n'est incliné d'aucun angle</p> <id de toile="canvas"></canvas> La traduction chinoise de <script> // Initialise une instance de canevas var toile = nouveau tissu.Canvas("toile"); Canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); // Initialise un objet triangle var triangle = nouveau tissu.Triangle({ gauche : 120, haut : 70, largeur : 90, Hauteur : 80, remplir : "#b7410e", Coup : "#f5deb3", (Remarque : il s'agit d'un morceau de code HTML, où représente un espace) largeur de trait : 7, }); //Ajoutez-le au canevas Canvas.add(triangle); </script> La traduction chinoise de </body> </html>
Copier après la connexion
Exemple 2
Mettez skewX comme clé et attribuez-lui une valeur personnalisée.
Dans cet exemple, nous verrons comment attribuer une valeur numérique à la propriété skewX La valeur transmise déterminera le degré d’inclinaison le long de l’axe X.
<!DOCTYPE html> La traduction chinoise de <html> La traduction chinoise de <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> La traduction chinoise de </head> La traduction chinoise de <body> <h2>Passer skewX comme clé et lui attribuer une valeur personnalisée</h2> <p>Vous pouvez voir que le triangle est incliné sur l'axe des x à un angle de 50 degrés</p> <id de toile="canvas"></canvas> La traduction chinoise de <script> // Initialise une instance de canevas var toile = nouveau tissu.Canvas("toile"); Canvas.setWidth(document.body.scrollWidth); Canvas.setHeight(250); // Initialise un objet triangle var triangle = nouveau tissu.Triangle({ gauche : 120, haut : 70, largeur : 90, Hauteur : 80, remplir : "#b7410e", Coup : "#f5deb3", (Remarque : il s'agit d'un morceau de code HTML, où représente un espace) largeur de trait : 7, biaisX: 50, }); //Ajoutez-le au canevas Canvas.add(triangle); </script> La traduction chinoise de </body> La traduction chinoise de </html>
Copier après la connexion
est :
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!