Comment redresser des objets IText à l'aide de FabricJS ?-js tutoriel-php.cn

Comment redresser des objets IText à l'aide de FabricJS ?

王林

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

avant

1450 Les gens l'ont consulté

如何使用 FabricJS 拉直 IText 对象？

Dans ce tutoriel, nous allons apprendre à redresser des objets 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 redresser les objets IText à l’aide de la méthode Straighten.

Grammaire

straighten(): fabric.Object

Copier après la connexion

Exemple 1

Passer la valeur à la propriété angle sans utiliser la méthode Straighten

Regardons un exemple de code pour voir à quoi ressemble un objet IText sans utiliser la méthode Straighten. La méthode Redresser redresse un objet en le faisant pivoter de son angle actuel à un angle de 0, 90, 180 ou 270, selon l'angle le plus proche. La propriété angle définit l'angle de rotation de l'objet en degrés. Ici, nous spécifions l'angle à 45 degrés. Mais comme nous n'avons pas appliqué la propriété Straighten, l'angle de rotation restera à 45 degrés.

<!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 the angle property a value without using the straighten method</h2>
   <p>You can see that the itext object has an angle of 45 degrees</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 HereLorem ipsum ", {
         width: 300,
         left: 210,
         top: 70,
         fontSize: 30,
         fill: "#b666d2",
         backgroundColor: "#f8f4ff",
         angle: 45,
      });

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

Copier après la connexion

Exemple 2

Utilisez la méthode de lissage

Regardons un exemple de code pour voir à quoi ressemble un objet IText lorsque la méthode Straighten est utilisée en conjonction avec la propriété angle. Bien que nous ayons défini l'angle de rotation à 45 degrés, notre objet itext sera redressé en le faisant pivoter à nouveau à 0 degré car nous avons utilisé la méthode Straighten.

<!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 straighten method</h2>
   <p>You can see that the angle of rotation is 0 degree for the 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 itext = new fabric.IText("Add Sample Text HereLorem ipsum ", {
         width: 300,
         left: 210,
         top: 70,
         fontSize: 30,
         fill: "#b666d2",
         backgroundColor: "#f8f4ff",
         angle: 45,
      });

      // Add it to the canvas
      canvas.add(itext);

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