Heim > Artikel > Web-Frontend > FabricJS – Wie finde ich die wahren Mittelpunktskoordinaten eines Bildobjekts?

FabricJS – Wie finde ich die wahren Mittelpunktskoordinaten eines Bildobjekts?

PHPznach vorne: 2023-08-24 11:09:121331Durchsuche

FabricJS – 如何找到 Image 对象的真实中心坐标？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS die wahren Mittelpunktskoordinaten eines Bildobjekts ermitteln. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um die wahren Mittelpunktskoordinaten des Bildobjekts zu ermitteln, verwenden wir die Methode getCenterPoint.

Grammatik

getCenterPoint(): fabric.Point

Verwenden Sie die Methode getCenterPoint

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der Methode

getCenterPoint zu sehen. Die Methode getCenterPoint gibt die wahren Mittelpunktskoordinaten des Objekts zurück. In diesem Beispiel sind die aufgezeichneten Ausgaben x= 256,5 und y= 91, 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> 
   <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 the getCenterPoint method
      console.log(
         "The center point of Image object is: ",
         image.getCenterPoint()
      );
   </script>
</body>
</html>

Verwenden Sie die Methode „getCenterPoint“ und die Methode „cropX“

Beispiel

In diesem Beispiel haben wir die Methode „getCenterPoint“ und die Methode „cropX“ verwendet, um zu beweisen, dass der aufgezeichnete Mittelpunktwert unverändert bleibt.

<!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 along with cropX 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>
   <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,
         cropX: 70,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Image object is: ",
         image.getCenterPoint()
      );
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonFabricJS – Wie finde ich die wahren Mittelpunktskoordinaten eines Bildobjekts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Wie richtet man Textinhalte mithilfe von JavaScript zentriert aus?Nächster Artikel：Wie richtet man Textinhalte mithilfe von JavaScript zentriert aus?

In Verbindung stehende Artikel

Mehr sehen