recherche

Maison >interface Web >js tutoriel >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 ?

WBOY
WBOYavant
2023-09-11 17:05:091228parcourir

如何使用 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>
<!--Ajouter une bibliothèque Fabric JS-->
<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>
<!--Ajouter une bibliothèque Fabric JS-->
<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