Maison > Article > interface Web > Comment masquer la bordure de contrôle d'un cercle à l'aide de FabricJS ?

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

PHPzavant: 2023-08-24 09:21:121411parcourir

如何使用 FabricJS 隐藏圆的控制边框？

Dans ce tutoriel, nous allons apprendre à masquer la bordure de contrôle d'un cercle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Pour créer un cercle, nous allons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. Nous pouvons personnaliser les bordures de contrôle de plusieurs manières, par exemple en ajoutant des couleurs spécifiques, des motifs de tirets, etc. Cependant, nous pouvons également éliminer entièrement les bordures en utilisant la propriété hasBorders.

Syntaxe

new fabric.Circle({ hasBorders: Boolean }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui offre une personnalisation supplémentaire pour nos cercles. 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 hasBorders comme attribut.

Option Key

hasBorders - Cette propriété accepte une valeur boolean, lorsqu'elle est définie sur False, les bordures de contrôle ne seront pas rendues. La valeur par défaut est Vrai.

Exemple 1

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

Regardons un morceau de code qui montre l'apparence par défaut de la bordure du cercle de contrôle. Puisque la valeur par défaut de la propriété hasBorders est True, les bordures sont rendues lorsqu'un objet circulaire 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>Hiding the controlling borders of a circle using FabricJS</h2>
      <p>Select the object and notice its controlling borders. This is the default appearance. Although we have not used the <b>hasBorders</b> property, it is by default set to True.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5
         });

         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Passer hasBorders comme clé et lui attribuer une valeur de "false"

Si la propriété hasBorders se voit attribuer une valeur False, les bordures ne seront plus rendues. Cela signifie que lorsque nous sélectionnons l'objet circulaire, 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>Hiding the controlling borders of a circle using FabricJS</h2>
      <p>Select the object and now you will no longer be able to see its controlling borders, as we have set <b>hasBorders</b> as False.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            hasBorders: false
         });

         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</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!

对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Implémentation de LinkedList en JavascriptArticle suivant：Implémentation de LinkedList en Javascript

Articles Liés

Voir plus