Comment désactiver la sélectivité de Circle à l'aide de FabricJS ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-09-01 19:41:02

avant

832 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment désactiver la sélectivité des cercles à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Afin de créer un cercle, nous devons créer une instance de la classe Fabric.Circle 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 l'attribut selectable.

Syntaxe

new fabric.Circle({ selectable: Boolean }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet< /em> qui offre une personnalisation supplémentaire pour nos cercles. 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.

Option Key

Selectable - Cette propriété accepte une valeur booléenne< /strong>. Lorsqu'une valeur "fausse" lui est attribuée, l'objet ne peut pas être sélectionné pour modification. Sa valeur par défaut est True.

Exemple 1

Comportement par défaut ou Propriété facultative< /em> définie sur "true"

Regardons un exemple pour comprendre comment un objet se comporte par défaut lorsque la propriété sélectionnable 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>Disabling the selectability of circle using FabricJs</h2>
      <p>Here you can select the object (circle) and move it around freely. This is the default behavior. Here we have not used the <b>selectable</b> property but by default, it is set to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Copier après la connexion

Exemple 2

Passer la propriété sélectionnable comme clé

Dans cet exemple, nous sommes une propriété sélectionnable. Cela signifie que nous ne pouvons plus sélectionner des objets circulaires à 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>Disabling the selectability of circle using FabricJs</h2>
      <p>Now you can no longer select the circle because we have set <b>selectable</b> as False. </p>
      <canvas id="canvas"></canvas>
   
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65",
            selectable: false
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </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!