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

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

王林

Libérer： 2023-09-03 19:21:06

avant

1422 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment centrer un objet image horizontalement 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 Il peut également être facilement personnalisé en appliquant des propriétés telles que l’angle, l’opacité, etc. Pour placer un objet Image horizontalement sur la fenêtre actuelle du canevas, nous utilisons viewportCenterH méthode.

Grammaire

viewportCenterH(): fabric.Object

Copier après la connexion

Apparence par défaut de l'objet Image

Exemple

Regardons un exemple de code pour voir ce qui se passe lorsque viewportCenterH La méthode n’est pas utilisée. Dans ce cas, l'objet image ne sera pas centré horizontalement toile.

<!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>

Copier après la connexion

Utilisez la méthode viewportCenterH

Exemple

Regardons un exemple de code pour voir comment fonctionne l'objet image Utilisez la méthode viewportCenterH. Dans ce cas notre objet image sera centré horizontalement 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 viewportCenterH method</h2>
   <p>
      You can see that the image object is centered horizontally 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 viewportCenterH method
      image.viewportCenterH();
   </script>
</body>
</html>

Copier après la connexion

Conclusion

Dans ce tutoriel, nous utilisons deux exemples pour montrer comment centrer un objet image Positionnez le canevas horizontalement sur la fenêtre actuelle à 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!