Comment masquer les coins de contrôle d'un rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

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

王林

Libérer： 2023-08-31 18:05:08

avant

678 Les gens l'ont consulté

如何使用 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)

Copier après la connexion

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>

Copier après la connexion

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>

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!