Comment définir la position d'un triangle à partir du haut à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir la position d'un triangle à partir du haut à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-17 16:25:02

avant

947 Les gens l'ont consulté

如何使用 FabricJS 设置三角形从顶部的位置？

Dans ce tutoriel, nous définirons la position du triangle à l'aide de FabricJS. La propriété top nous permet de manipuler la position d'un objet. Par défaut, la position supérieure est relative au sommet de l'objet.

Syntaxe

 new Fabric.Triangle({ haut : Nombre } : Objet)< /pre><h2>Paramètres</h2><ul class="list"><li><p><strong> ;/strong><strong> (facultatif)</strongphpcngtphp cn - Ce paramètre est un <em>Object</em> 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 <em>top</em> </p></li></ul><h2>Touches d'options</h2phpcngt phpcn<ul Class= list"><li><p><strong>top</strong> - Cette propriété accepte un <strong>Number</strong> qui nous permet de définir la distance du triangle par rapport au haut du canevas </p></li> 1</h2> <p><strong>Apparence par défaut des objets triangulaires</strong></p><p>Regardons un exemple de code pour voir comment nos objets triangulaires apparaissent lorsque la propriété supérieure n'est pas utilisé </ p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!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> Apparence par défaut des objets triangulaires</h2>
<p> L'apparence par défaut du triangle est visible lorsque l'attribut <b>top</b> </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 : 105,
Largeur : 90,
Hauteur : 80,
Remplissez : "#ffc1cc",
Accident vasculaire cérébral : "#fbaed2",
Largeur de trait : 5,
});

//Ajoutez-le au canevas
toile.ajouter(triangle);
</script>
</corps>
</html>

Exemple 2

Passer l'attribut top en tant que clé à l'aide d'une valeur personnalisée

Dans cet exemple, nous transmettons l'attribut top Cela signifie que notre objet triangle sera placé à 70 pixels du haut.

<!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>Transmettre l'attribut top en tant que clé avec une valeur personnalisée</h2>
<p>Vous pouvez voir que l'objet triangle est placé à 70 px du haut</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 : 105,
Haut : 70,
Largeur : 90,
Hauteur : 80,
Remplissez : "#ffc1cc",
Accident vasculaire cérébral : "#fbaed2",
Largeur de trait : 5,
});

//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!