Comment désactiver la sélection du rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

Comment désactiver la sélection du rectangle à l'aide de FabricJS ?

PHPz

Libérer： 2023-08-25 09:25:04

avant

969 Les gens l'ont consulté

Comment désactiver la sélection du rectangle à laide de FabricJS ?

Dans cet article, nous apprendrons comment désactiver la sélectivité 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. Afin de modifier un objet, nous devons le sélectionner dans FabricJS. Cependant, nous pouvons modifier ce comportement en utilisant des attributs facultatifs.

Syntaxe

new fabric.Rect{ selectable: Boolean }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet utilisé pour fournir une personnalisation supplémentaire au 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 à la nature sélectionnable.

Clé d'option

Facultatif - Cette propriété accepte une Valeur booléenne. Lorsqu'il est affecté à "false", l'objet ne peut pas être sélectionné pour modification. Sa valeur par défaut est vraie.

Exemple 1

Comportement par défaut ou lorsque la propriété facultative est définie sur "True"

Regardons un exemple de code pour comprendre comment un objet se comporte lorsque la propriété facultative est définie sur True par défaut. Lorsque la propriété Selective est définie sur True, nous pouvons sélectionner un objet, le déplacer sur le canevas et le modifier.

<!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 behaviour; selectable property is set to True</h2>
   <p>You can try moving the rectangle around the canvas or scaling it to prove
that it&#39;s selectable.</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: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
      });

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

Copier après la connexion

Exemple 2

Passer un attribut sélectionnable comme clé

Dans cet exemple, nous définissons la valeur de l'attribut sélectionnable sur False. Cela signifie que nous ne pouvons plus sélectionner l'objet rectangulaire à modifier.

<!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 selectable property as key</h2>
   <p>You can try clicking on the rectangle to see that it is no longer selectable.</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: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
         selectable: 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!