Maison > Article > interface Web > Comment obtenir les coordonnées d'un objet Line à l'aide de FabricJS ?

Comment obtenir les coordonnées d'un objet Line à l'aide de FabricJS ?

WBOYavant: 2023-09-22 17:45:091568parcourir

如何使用 FabricJS 获取 Line 对象的坐标？

Dans ce tutoriel, nous allons montrer comment obtenir les coordonnées d'une ligne à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis. Nous pouvons créer un objet ligne en créant une instance de fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour obtenir les coordonnées d'un objet Line, nous utilisons la méthode getCoords.

Syntaxe

 getCoords(): Array

Utilisation de la méthode getCoords

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lorsque la méthode getCoords est utilisée. La méthode getCoords renvoie les coordonnées supérieure gauche, supérieure droite, inférieure droite et inférieure gauche de la ligne au format tableau.

<!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 getCoords method</h2>
   <p>You can open console from dev tools and see the logged output</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([50, 100, 310, 100], {
         stroke: "blue",
         strokeWidth: 10,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using getCoords method
      console.log("The coordinates are: ", line.getCoords());
   </script>
</body>
</html>

Dessiner des lignes diagonales à l'aide de la méthode getCoords

Exemple

Dans cet exemple, nous avons utilisé la méthode getCoords pour obtenir les coordonnées des instances de ligne avec des coordonnées de début et de fin différentes. Nous pouvons voir que la sortie enregistrée est : (100, 40), (220, 40), (220,120), (100,120), qui sont les coordonnées du coin supérieur gauche, du coin supérieur droit, du coin inférieur droit et du coin inférieur gauche. de la rangée respectivement.

<!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 getCoords method for a slant line</h2>
   <p>You can open console from dev tools and see the logged output</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using getCoords method
      console.log("The coordinates are: ", line.getCoords());
   </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!

对象 fabric

Déclaration：

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

Article précédent：Comment activer la mise à l'échelle de la rétine pour les images clonées à l'aide de FabricJS ?Article suivant：Comment activer la mise à l'échelle de la rétine pour les images clonées à l'aide de FabricJS ?

Articles Liés

Voir plus