Comment centrer verticalement un objet par rapport à la fenêtre actuelle du canevas dans IText à l'aide de FabricJS ?-js tutoriel-php.cn

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

王林

Libérer： 2023-08-24 10:21:10

avant

1395 Les gens l'ont consulté

如何使用 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

Copier après la connexion

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>

Copier après la connexion

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>

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!