FabricJS - Comment obtenir la position d'un objet Image par rapport à l'origine ?-js tutoriel-php.cn

FabricJS - Comment obtenir la position d'un objet Image par rapport à l'origine ?

王林

Libérer： 2023-09-16 20:05:02

avant

1259 Les gens l'ont consulté

FabricJS – 如何获取 Image 对象相对于原点的位置？

Dans ce tutoriel, nous apprendrons comment obtenir la position d'un objet Image par rapport à son origine à 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 obtenir la position de l'objet Image par rapport à l'origine, nous utilisons la méthode getPointByOrigin.

Grammaire

getPointByOrigin(originX: String, originY: String): fabric.Point

Copier après la connexion

Paramètres

originX - Ce paramètre accepte une String spécifiant l'origine horizontale. Les valeurs possibles sont « gauche », « centre » ou « droite ».
originY - Ce paramètre accepte une String représentant l'origine verticale. Les valeurs possibles sont "Top", "Center" ou "Bottom".

Utilisez la méthode getPointByOrigin

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode getPointByOrigin. La méthode getPointByOrigin renvoie les coordonnées de l'objet de l'origine spécifiée par l'utilisateur. Dans cet exemple, nous utilisons également la méthode getCenterPoint afin que vous puissiez voir le véritable point central de l'objet Image donné. Et lorsque nous utilisons la méthode getPointByOrigin, nous utilisons le point inférieur gauche comme origine, donc la sortie enregistrée est x= 110 et y= 132.

<!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 getPointByOrigin method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the coordinates
   </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 getCenterPoint method
      console.log(
         "The real center point of the object is: ",
         image.getCenterPoint()
      );
      
      // Using getPointByOrigin method
      console.log(
         "The coordinates returned while using getPointByOrigin method are: ",
         image.getPointByOrigin("left", "bottom")
      );
   </script>
</body>
</html>

Copier après la connexion

Utilisez la méthode getPointByOrigin

avec différentes valeurs

Exemple

Dans cet exemple, nous utilisons la méthode getPointByOrigin pour obtenir les coordonnées de l'objet Image lorsque les points centraux horizontaux et verticaux sont « droit » et « haut ». Cela signifie que le point supérieur droit sera considéré comme le centre.

<!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 getPointByOrigin method with different values</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the coordinates
   </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 getPointByOrigin method
      console.log(
         "The coordinates returned while using getPointByOrigin method are: ",
         image.getPointByOrigin("right", "top")
      );
   </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!