Comment obtenir les coordonnées d'un objet Line à l'aide de FabricJS ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-09-22 17:45:09

avant

1533 Les gens l'ont consulté

如何使用 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

Copier après la connexion

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>

Copier après la connexion

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>

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!