Heim > Artikel > Web-Frontend > Wie finde ich mit FabricJS die wahren Mittelpunktkoordinaten eines Linienobjekts?

Wie finde ich mit FabricJS die wahren Mittelpunktkoordinaten eines Linienobjekts?

王林nach vorne: 2023-09-16 12:09:031240Durchsuche

如何使用 FabricJS 找到 Line 对象的真实中心坐标？

In diesem Tutorial lernen wir, wie man mit FabricJS die Mittelpunktskoordinaten einer Linie ermittelt. 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 wahren Mittelpunktskoordinaten des Linienobjekts zu ermitteln, verwenden wir die Methode getCenterPoint.

Syntax

 getCenterPoint(): fabric.Point

Verwendung der Methode getCenterPoint

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die Methode getCenterPoint verwendet wird. Die Methode getCenterPoint gibt die wahren Mittelpunktskoordinaten des Objekts zurück. In diesem Beispiel sind die aufgezeichneten Ausgaben x= 110,5 und y= 150,5, die die Mittelpunkte sind.

<!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>
   <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([70, 100, 150, 200], {
         stroke: "blue",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Line object is: ",
         line.getCenterPoint()
      );
   </script>
</body>
</html>

Verwenden Sie die Methode getCenterPoint mit unterschiedlichen Start- und Endkoordinaten der Linie

Beispiel

In diesem Beispiel verwenden wir die Methode getCenterPoint i>, um die Start- und Endkoordinaten der Linieninstanz als (100, 250) zu erhalten ) und (250, 40). Die Mittelpunkte liegen bei 175,5 und 145,5.

<!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 with different starting and ending coordinates of line
   </h2>
   <p>
      You can open console from dev tools and see that the logged output contains the center points
   </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([100, 250, 250, 40], {
         stroke: "blue",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Line object is: ",
         line.getCenterPoint()
      );
   </script>
</body>
</html>

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

对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie sperre ich die vertikale Bewegung einer Linie mit FabricJS?Nächster Artikel：Wie sperre ich die vertikale Bewegung einer Linie mit FabricJS?

In Verbindung stehende Artikel

Mehr sehen