Comment déplacer un objet vers le haut de la pile d'objets dessinés dans IText à l'aide de FabricJS ?-js tutoriel-php.cn

Comment déplacer un objet vers le haut de la pile d'objets dessinés dans IText à l'aide de FabricJS ?

PHPz

Libérer： 2023-09-05 10:57:06

avant

785 Les gens l'ont consulté

如何使用 FabricJS 将对象移动到 IText 中绘制对象堆栈的顶部？

Dans ce tutoriel, nous apprendrons comment déplacer un objet vers le haut de la pile d'objets dessinés dans 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. De même, nous pouvons utiliser la méthode BringToFront pour déplacer un objet vers le haut de la pile d'objets dessinés.

Grammaire

bringToFront(): fabric.Object

Copier après la connexion

Exemple 1

Ne pas utiliser la méthode bringToFront

Regardons un exemple de code pour voir comment un objet IText se comporte sans utiliser la méthode BringToFront. Dans cet exemple, nous initialisons deux objets IText, itext1 et itext2. Vous pouvez remarquer que le deuxième texte recouvre le premier texte, le cachant derrière.

<!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>Without using the bringToFront method</h2>
   <p> You can see that the first itext object is hidden behind the second itext object </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 itext1 = new fabric.IText("First itext object.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "#b666d2",
         fontStyle: "bold",
         backgroundColor: "#f8f4ff",
      });

      // Initiate another itext object
      var itext2 = new fabric.IText("Second itext object.", {
         width: 300,
         left: 130,
         top: 90,
         fill: "white",
         backgroundColor: "#c8a2c8",
      });

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

Copier après la connexion

Exemple 2

Utilisez la méthode bringToFront

Regardons un exemple de code pour voir comment un objet IText se comporte lors de l'utilisation de la méthode BringToFront. Dans ce cas, notre objet itext1 sera désormais en haut de la pile, il ne sera donc plus caché derrière itext2.

<!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>Using the bringToFront method</h2>
   <p> You can see that the first itext object is no longer hidden behind the second itext object </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 itext1 = new fabric.IText("First itext object.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "#b666d2",
         fontStyle: "bold",
         backgroundColor: "#f8f4ff",
      });

      // Initiate another itext object
      var itext2 = new fabric.IText("Second itext object.", {
         width: 300,
         left: 130,
         top: 90,
         fill: "white",
         backgroundColor: "#c8a2c8",
      });
      
      // Add it to the canvas
      canvas.add(itext1);
      canvas.add(itext2);

      // Using the bringToFront method
      itext1.bringToFront();
   </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!