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.
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>
≪/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>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>
≪/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!
Quels sont les logiciels bureautiques
COMMENT INSTALLER LINUX
Comment vérifier l'adresse Mac
Utilisation de la fonction between
Quels sont les paramètres de configuration du serveur vidéo ?
Comment résoudre le problème de téléchargement lent de Baidu Netdisk
Comment désactiver le pare-feu
réalisation de pages web html
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
