Comment définir la position d'un triangle en partant de la gauche à l'aide de FabricJS ?-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment définir la position d'un triangle en partant de la gauche à l'aide de FabricJS ?

Sep 11, 2023 pm 05:05 PM

如何使用 FabricJS 设置三角形从左开始的位置？

<p>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 <em>fabric.Triangle</em> et l'ajouter au canevas.</p><p> opacité, utilisez le trait et ses dimensions pour manipuler des objets triangulaires. Vous pouvez utiliser la propriété <em>left</em> pour modifier la position du côté gauche. </p><h2>Syntaxe</h2><pre class="just-code notranslate language-javascript" data-lang="javascript">new Fabric.Triangle( { gauche : Nombre } : Objet) </pre><h2>Paramètres</h2><ul class="list"><li><p><strong>Options</strong><strong> /strong> - Ce paramètre est <em>Object</em> 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 <em>left</em> </p></li></ul><h2>Touches d'options</h2phpcngtphp cn<ul class="list" "><li><p><strong>left</ strong> - Cette propriété accepte une valeur <strong>Number</strong> qui définit la position gauche de l'objet. Cette valeur détermine à quelle distance du bord gauche du canevas l'objet sera positionné. </ li></ul><h2>Exemple 1</h2><p><strong>Placement par défaut des objets triangulaires</strongphpcn gtphpcn</p><p>Regardons un code exemple pour comprendre le placement par défaut des objets triangulaires sur le canevas lorsque la position n'a pas changé </p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!DOCTYPE html> <html> <tête>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> ≪/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></pre><h2>Exemple 2</h2><p><strong>Passer l'attribut de gauche en tant que clé</strong></p><p> Par exemple, nous attribuons une valeur personnalisée à l'attribut <em>left</em>. Puisqu'il accepte un <strong>Number</strong>, vous devez lui attribuer une valeur numérique qui représentera sa position à partir de la gauche. </p><pre class="demo-code notranslate langage-javascript" data-lang="javascript"><!DOCTYPE html> <html> <tête>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> ≪/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></pre>

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 de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn