Maison > Article > interface Web > Comment désactiver la sélectivité de Triangle à l'aide de FabricJS ?

Comment désactiver la sélectivité de Triangle à l'aide de FabricJS ?

王林avant: 2023-09-08 17:13:021127parcourir

如何使用 FabricJS 禁用 Triangle 的选择性？

Dans ce tutoriel, nous apprendrons comment désactiver la sélectivité des triangles à l'aide de FabricJS. Triangle est l'une des différentes formes fournies par FabricJS. Afin de créer un triangle, nous devons créer une instance de la classe Fabric.Triangle et l'ajouter au canevas.

Pour modifier un objet, nous devons le sélectionner dans FabricJS. Cependant, nous pouvons désactiver ce comportement en utilisant l'attribut selectable.

Syntaxe

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

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre triangle. En utilisant ce paramètre, vous pouvez modifier les propriétés de l'objet liées à l'attribut selectable, telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés.

Clé d'option

Sélectionnable - Cette propriété accepte les valeurs booléennes. Lorsqu'une valeur "fausse" lui est attribuée, l'objet ne peut pas être sélectionné pour modification. Sa valeur par défaut est vraie.

Exemple 1

Comportement par défaut ou propriété facultative lorsqu'elle est définie sur "true"

Regardons un exemple de code pour comprendre comment un objet se comporte par défaut lorsque la propriété selectable est définie sur True. Lorsque la propriété selectable 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 or when selectable property is set to &#39;true&#39;</h2>
   <p>You can try moving the triangle 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
      });

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

Exemple 2

Passer un attribut facultatif en tant que clé

Dans cet exemple, nous attribuons une valeur False à l'attribut facultatif. Cela signifie que nous ne pouvons plus sélectionner l'objet triangle pour 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>Passing selectable property as key</h2>
   <p>You can see that the triangle 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
         selectable: false,
      });

      // Add it to the canvas
      canvas.add(triangle);
   </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!

对象 ul fabric

Déclaration：

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

Article précédent：Comment compter les mots sur une zone de texte en utilisant JavaScript ?Article suivant：Comment compter les mots sur une zone de texte en utilisant JavaScript ?

Articles Liés

Voir plus