Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2023-08-24 19:29:02
avant
1470 Les gens l'ont consulté

如何使用 FabricJS 将 Image 对象置于画布当前视口的中心?

Dans ce tutoriel, nous apprendrons comment centrer un objet image dans la fenêtre actuelle Dessinez le canevas à l'aide de FabricJS. Nous pouvons créer un objet Image en créant une instance Tissu.Image. Puisqu’il s’agit d’un des éléments de base de FabricJS, on peut aussi facilement Personnalisez-le en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour centrer l'image Pour les objets sur la fenêtre actuelle du canevas, nous utilisons la méthode viewportCenter.

Grammaire

viewportCenter(): 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 viewportCenter La méthode n’est pas utilisée. Dans ce cas, l’objet image ne sera pas centré 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 that the image object is not centered 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);
   </script>
</body>
</html>
Copier après la connexion

Utilisez la méthode viewportCenter

Exemple

Regardons un exemple de code pour voir comment fonctionne l'objet image Utilisez la méthode viewportCenter. Dans ce cas, notre objet image sera Les directions verticale et horizontale sont relatives à la fenêtre d'affichage 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 viewportCenter method</h2>
   <p>
      You can see that the image object is centered 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 viewportCenter method
      image.viewportCenter();
   </script>
</body>
</html>
Copier après la connexion

Conclusion

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

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!