Maison > Article > interface Web > Comment définir l'angle d'inclinaison d'un triangle sur l'axe des x à l'aide de FabricJS ?

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

WBOYavant: 2023-09-05 22:37:12818parcourir

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 )

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 - 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>
<!-- Ajouter la bibliothèque Fabric JS --->
<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>

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>
<!-- Ajouter la bibliothèque Fabric JS --->
<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>

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!

Déclaration：

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

Article précédent：Comment convertir un tableau 2D en chaîne CSV en JavaScript ?Article suivant：Comment convertir un tableau 2D en chaîne CSV en JavaScript ?

Articles Liés

Voir plus