Wie erhalte ich die Koordinaten eines Linienobjekts mit FabricJS?-js-Tutorial-php.cn

Wie erhalte ich die Koordinaten eines Linienobjekts mit FabricJS?

WBOY

Freigeben： 2023-09-22 17:45:09

nach vorne

1623 Leute haben es durchsucht

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

In diesem Tutorial zeigen wir, wie man mit FabricJS die Koordinaten einer Linie erhält. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von fabric.Line erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um die Koordinaten eines Linienobjekts zu erhalten, verwenden wir die Methode getCoords.

Syntax

 getCoords(): Array

Nach dem Login kopieren

Verwendung der getCoords-Methode

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die getCoords-Methode verwendet wird. Die getCoords-Methode gibt die oberen linken, oberen rechten, unteren rechten und unteren linken Koordinaten von Line im Array-Format zurück.

<!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>

Nach dem Login kopieren

Zeichnen diagonaler Linien mit der Methode getCoords

Beispiel

In diesem Beispiel haben wir die Methode

getCoords verwendet, um die Koordinaten von Linieninstanzen mit unterschiedlichen Start- und Endkoordinaten zu erhalten. Wir können sehen, dass die aufgezeichnete Ausgabe (100, 40), (220, 40), (220,120), (100,120) ist, was die Koordinaten der oberen linken Ecke, der oberen rechten Ecke, der unteren rechten Ecke und der unteren linken Ecke sind der Reihe bzw..

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erhalte ich die Koordinaten eines Linienobjekts mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!