Maison >interface Web >js tutoriel >Comment désactiver la sélectivité IText à l'aide de FabricJS ?

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

王林avant: 2023-08-24 20:13:021358parcourir

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

Dans ce tutoriel, nous apprendrons comment désactiver la sélectivité IText à l'aide de FabricJS. La classe IText a été introduite dans FabricJS version 1.4, qui étend Fabric.Text et est utilisée pour créer des instances IText. Les instances IText nous donnent la liberté de sélectionner, couper, coller ou ajouter un nouveau texte sans configuration supplémentaire. Il existe également diverses combinaisons de touches et combinaisons souris/tactile prises en charge pour rendre le texte interactif qui ne sont pas disponibles dans Texte.

Cependant, Textbox basé sur IText nous permet de redimensionner le rectangle de texte et de l'envelopper automatiquement. Ce n'est pas le cas pour IText, car la hauteur ne s'ajuste pas en fonction des sauts de ligne. Nous pouvons manipuler des objets IText en utilisant diverses propriétés. Afin de modifier un objet, nous devons le sélectionner dans FabricJS. Cependant, nous pouvons modifier ce comportement en utilisant l'attribut selectable.

Grammaire

new fabric.IText(text: String, { selectable: Boolean }: Object)

Paramètres

text - Ce paramètre accepte String qui est la chaîne de texte que nous voulons afficher dans l'objet IText.
Options (facultatif) - Ce paramètre est un objet qui offre une personnalisation supplémentaire à notre objet. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées à un objet dont les propriétés peuvent être sélectionnées.

Touche d'option

selectable - 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

Lorsque le comportement par défaut ou l'attribut facultatif est défini sur "true"

Regardons un exemple de code pour comprendre comment un objet se comporte lorsque la propriété selectable est définie sur true par défaut. 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 ‘true’</h2>
   <p>You can try moving the itext object around the canvas or scaling it to prove that it'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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#6ae18b",
         }
      );

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

Exemple 2

Passez les attributs facultatifs en tant que clés avec une valeur "fausse"

Dans cet exemple, nous avons attribué une valeur fausse à l'attribut facultatif. Cela signifie que nous ne pouvons plus sélectionner les objets IText à 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 with “false” value</h2>
   <p>You can see that the itext object 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 an itext object
      var itext = new fabric.IText(
         "Add sample text here.Lorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#6ae18b",
            selectable: false,
         }
      );

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

Déclaration：

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

Article précédent：Programme JavaScript pour échanger des nœuds dans une liste chaînée sans échanger de donnéesArticle suivant：Programme JavaScript pour échanger des nœuds dans une liste chaînée sans échanger de données

Articles Liés

Voir plus