Maison > interface Web > js tutoriel > le corps du texte

Comment masquer la bordure de contrôle d'un triangle à l'aide de FabricJS ?

王林
Libérer: 2023-09-01 08:29:05
avant
624 Les gens l'ont consulté

如何使用 FabricJS 隐藏三角形的控制边框?

Dans ce tutoriel, nous allons apprendre à masquer la bordure de contrôle 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 devons créer une instance de la classe Fabric.Triangle et l'ajouter au canevas.

Nous pouvons personnaliser la bordure de contrôle de plusieurs manières, par exemple en y ajoutant une couleur spécifique, un motif en pointillés, etc. Nous pouvons également supprimer complètement les bordures en utilisant la propriété hasBorders.

Syntaxe

new fabric.Triangle({ hasBorders: Boolean }: Object)
Copier après la connexion

Paramètres

  • Options (facultatif)− Ce paramètre est un objet< /em> qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier les propriétés liées à l'objet pour lequel hasBorders est un attribut, telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés.

  • < /ul>

    Option Key

    • hasBorders - Cette propriété accepte une valeur boolean, qui aide à restituer les bordures de contrôle. Lorsqu'elle est définie sur False, la bordure de contrôle ne sera pas rendue. La valeur par défaut est vraie.

    Exemple 1

    L'objet Triangle contrôle l'apparence par défaut de la bordure

    Regardons un exemple de code qui montre l'apparence par défaut de la bordure triangulaire. Puisque la valeur par défaut de la propriété hasBorders est True, les bordures sont rendues lorsque l'objet triangle est sélectionné.

    <!DOCTYPE html>
    <html>
    <head>
       <!-- Adding the Fabric JS Library-->
       <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
    </head>
    <body>
       <h2>Default appearance of the controlling borders of a triangle object</h2>
       <p>Select the triangle to see its controlling borders</p>
       <canvas id="canvas"></canvas>
       <script>
          // Initiate a canvas instance
          var canvas = new fabric.Canvas("canvas");
          canvas.setWidth(document.body.scrollWidth);
          canvas.setHeight(250);
    
          // Initiate a triangle object
          var triangle = new fabric.Triangle({
             left: 105,
             top: 75,
             width: 90,
             height: 80,
             fill: "#ff878d",
             stroke: "#674846",
             strokeWidth: 5,
          });
    
          // Add it to the canvas
          canvas.add(triangle);
       </script>
    </body>
    </html>
    Copier après la connexion

    Exemple 2

    Passer hasBorders comme clé et lui attribuer une valeur "fausse"

    Si la propriété hasBorders est spécifiée avec une valeur False, les bordures ne seront plus rendues. Cela signifie que lorsque nous sélectionnons l'objet triangle, la bordure de contrôle sera masquée.

    <!DOCTYPE html>
    <html>
    <head>
       <!-- Adding the Fabric JS Library-->
       <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
    </head>
    <body>
       <h2>Passing hasBorders as key and assigning it "false"</h2>
       <p>Select the triangle and observe that its controlling borders have not been rendered.</p>
       <canvas id="canvas"></canvas>
       <script>
          // Initiate a canvas instance
          var canvas = new fabric.Canvas("canvas");
          canvas.setWidth(document.body.scrollWidth);
          canvas.setHeight(250);
    
          // Initiate a triangle object
          var triangle = new fabric.Triangle({
             left: 105,
             top: 75,
             width: 90,
             height: 80,
             fill: "#ff878d",
             stroke: "#674846",
             strokeWidth: 5,
             hasBorders: false,
          });
    
          // Add it to the canvas
          canvas.add(triangle);
       </script>
    </body>
    </html>
    Copier après la connexion

    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!

source:tutorialspoint.com
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal