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

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

WBOYavant: 2023-08-23 15:49:02997parcourir

Comment masquer la bordure de contrôle dun rectangle à laide de FabricJS ?

Dans ce tutoriel, nous allons apprendre à masquer la bordure de contrôle d'un rectangle à l'aide de FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. Afin de créer un rectangle, nous devons créer une instance de la classe fabric.Rect 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 de lignes pointillées, etc. Cependant, nous pouvons également éliminer complètement les bordures en utilisant la propriété hasBorders.

Syntaxe

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

Paramètres

Options (facultatif) − Ce paramètre est un objet utilisé pour fournir des personnalisations supplémentaires pour le rectangle. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées aux objets dotés de propriétés de bordure.

Option key

hasBorders - Cette propriété accepte une valeur booléenne, lorsqu'elle est définie sur false, les bordures de contrôle ne seront pas rendues. Cela aide à rendre les frontières de contrôle. La valeur par défaut est vraie.

Exemple 1

L'apparence par défaut de la bordure de contrôle d'un objet rectangulaire

Regardons un exemple de code montrant l'apparence par défaut de la bordure de contrôle d'un rectangle. Puisque la valeur par défaut de la propriété hasBorders est True, les bordures sont rendues lorsqu'un objet rectangulaire 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 controlling borders of a rectangle object</h2>
   <p>Select the rectangle to see the default appearance of 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         strokeWidth: 3,
         stroke: "#4169e1",
         fill: "grey",
         padding: 15,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Exemple 2

Utilisez hasBorders comme clé et attribuez-lui la valeur "false"

Si la propriété hasBorders reçoit une valeur fausse, la bordure ne sera plus rendue. Cela signifie que lorsque nous sélectionnons l'objet rectangulaire, 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 a False value to it</h2>
   <p>Select the rectangle to see that the controlling borders have now been hidden</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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         strokeWidth: 3,
         stroke: "#4169e1",
         fill: "grey",
         padding: 15,
         hasBorders: false,
      });

      // Add it to the canvas
      canvas.add(rect);
   </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：Calculer des séquences arithmétiques possibles dans un tableau en JavaScriptArticle suivant：Calculer des séquences arithmétiques possibles dans un tableau en JavaScript

Articles Liés

Voir plus