Maison > Article > interface Web > Comment centrer verticalement un objet par rapport à la fenêtre actuelle du canevas dans IText à l'aide de FabricJS ?

Comment centrer verticalement un objet par rapport à la fenêtre actuelle du canevas dans IText à l'aide de FabricJS ?

王林avant: 2023-08-24 10:21:101383parcourir

如何使用 FabricJS 将对象相对于 IText 中画布的当前视口垂直居中？

Dans ce tutoriel, nous apprendrons comment centrer verticalement un objet par rapport à la fenêtre actuelle d'un canevas 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 viewportCenterV pour centrer verticalement un objet par rapport à la fenêtre actuelle du canevas.

Grammaire

viewportCenterV(): fabric.Object

Exemple 1

Apparence par défaut des objets IText

Regardons un exemple de code pour voir à quoi ressemble un objet IText sans utiliser la méthode viewportCenterV. Dans ce cas, l'objet itext ne sera pas centré verticalement sur le canevas.

<!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 appearance of the IText object</h2>
   <p>You can see that the itext object has not been centered vertically withrespect to the current viewport of canvas</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.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "red",
      });

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

Exemple 2

Utilisez la méthode viewportCenterV

Regardons un exemple de code pour voir à quoi ressemble un objet IText lors de l'utilisation de la méthode viewportCenterV. Dans ce cas, notre objet IText sera centré par rapport à la fenêtre actuelle du canevas.

<!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 viewportCenterV method</h2>
   <p>You can see that the itext object has been centered vertically with respect to the current viewport of canvas</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.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "red",
      });

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

      // Using the viewportCenterV method
      itext.viewportCenterV();
   </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：Comment puis-je accéder au « ceci » correct dans le rappel ?Article suivant：Comment puis-je accéder au « ceci » correct dans le rappel ?

Articles Liés

Voir plus