Maison > Article > interface Web > FabricJS - Comment trouver les véritables coordonnées du centre d'un objet Image ?

FabricJS - Comment trouver les véritables coordonnées du centre d'un objet Image ?

PHPzavant: 2023-08-24 11:09:121331parcourir

FabricJS – 如何找到 Image 对象的真实中心坐标？

Dans ce tutoriel, nous apprendrons comment trouver les véritables coordonnées centrales d'un objet Image à l'aide de FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour trouver les véritables coordonnées centrales de l'objet Image, nous utilisons la méthode getCenterPoint.

Grammaire

getCenterPoint(): fabric.Point

Utilisez la méthode getCenterPoint

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getCenterPoint. La méthode getCenterPoint renvoie les véritables coordonnées du centre de l'objet. Dans cet exemple, les sorties enregistrées sont x= 256,5 et y= 91, qui sont les points centraux.

<!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 getCenterPoint method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the center points
   </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 getCenterPoint method
      console.log(
         "The center point of Image object is: ",
         image.getCenterPoint()
      );
   </script>
</body>
</html>

Utilisez la méthode getCenterPoint et la méthode cropX

Exemple

Dans cet exemple, nous avons utilisé la méthode getCenterPoint et la méthode cropX pour prouver que la valeur du point central enregistrée restera inchangée.

<!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 getCenterPoint method along with cropX method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the center points
   </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,
         cropX: 70,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Image object is: ",
         image.getCenterPoint()
      );
   </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 centrer le contenu du texte à l'aide de JavaScript ?Article suivant：Comment centrer le contenu du texte à l'aide de JavaScript ?

Articles Liés

Voir plus