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

Comment masquer les coins de contrôle d'un rectangle à l'aide de FabricJS ?

王林avant: 2023-08-31 18:05:08666parcourir

如何使用 FabricJS 隐藏矩形的控制角？

Dans ce tutoriel, nous allons apprendre à masquer les coins 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. Les coins de contrôle d'un objet nous permettent d'augmenter ou de diminuer ses proportions, de l'étirer ou de modifier sa position.

Nous pouvons personnaliser le coin de contrôle de plusieurs manières, par exemple en y ajoutant une couleur spécifique, en modifiant sa taille, etc. Nous pouvons également les masquer en utilisant la propriété hasControls.

Syntaxe

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

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. À l'aide de ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés liées à l'objet pour lequel hasControls est un attribut.

Option Key

hasControls - Cette propriété accepte une valeur Boolean qui nous permet d'afficher ou de masquer les coins de contrôle de l'objet activement sélectionné. Sa valeur par défaut est vraie.

Exemple 1

Contrôlez l'apparence par défaut des coins

Voyons l'exemple de code qui montre l'apparence par défaut des coins de contrôle. Puisque la valeur par défaut de la propriété hasControls est True, les coins de contrôle ne sont pas masqués.

<!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 corners</h2>
   <p>Select the rectangle to see the default appearance of controlling corners</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

Passez hasControls comme clé et attribuez-lui une fausse valeur

Dans cet exemple, nous verrons comment masquer les coins de contrôle en utilisant l'attribut hasControls. Nous devons attribuer une valeur False à la clé hasControls. En faisant cela, les coins de contrôle seront masqués.

<!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 hasControls as key and assigning it a False value</h2>
   <p>Select the rectangle and observe that its controlling corners are 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,
         hasControls: 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：Comment obtenir une représentation SVG d'une ligne en utilisant FabricJS ?Article suivant：Comment obtenir une représentation SVG d'une ligne en utilisant FabricJS ?

Articles Liés

Voir plus