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

Comment centrer verticalement un objet Image sur la fenêtre actuelle du canevas à l'aide de FabricJS ?

WBOYavant: 2023-09-11 14:21:111468parcourir

如何使用 FabricJS 将 Image 对象在画布的当前视口上垂直居中？

Dans ce tutoriel, nous montrerons comment centrer verticalement un objet image La fenêtre d'affichage actuelle du canevas utilisant FabricJS. Nous pouvons créer un objet Image en Instance de fabric.Image. Puisqu'il s'agit d'un des éléments de base de FabricJS, nous pouvons également Personnalisez-le facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour centrer l'image Pour positionner l'objet verticalement sur la fenêtre actuelle du canevas, nous utilisons la méthode viewportCenterV.

Grammaire

viewportCenterV(): fabric.Object

Apparence par défaut de l'objet Image

Exemple

Regardons un exemple de code pour voir à quoi ressemble notre objet Image lors de l'utilisation de la méthode viewportCenterV Non utilisé. Dans ce cas, l’objet image 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 Image object</h2>
   <p>You can see the default appearance of Image object</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Utilisez la méthode viewportCenterV

Exemple

Regardons un exemple de code pour voir comment fonctionne l'objet image Utilisez la méthode viewportCenterV. Dans ce cas notre objet image sera centré Vertical 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 image object is centered vertically with respect to the current viewport of canvas
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the viewportCenterV method
      image.viewportCenterV();
   </script>
</body>
</html>

Conclusion

Dans ce tutoriel, nous utilisons deux exemples pour montrer comment centrer un objet image Afficher verticalement sur la fenêtre actuelle du canevas à l'aide de FabricJS.

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!

对象 fabric

Déclaration：

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

Article précédent：Comment arrêter la propagation des événements à l'aide de l'attribut onclick en ligne en JavaScript ?Article suivant：Comment arrêter la propagation des événements à l'aide de l'attribut onclick en ligne en JavaScript ?

Articles Liés

Voir plus