FabricJS – Wie erhalte ich die Position eines Bildobjekts relativ zum Ursprung?-js-Tutorial-php.cn

FabricJS – Wie erhalte ich die Position eines Bildobjekts relativ zum Ursprung?

王林

Freigeben： 2023-09-16 20:05:02

nach vorne

1259 Leute haben es durchsucht

FabricJS – 如何获取 Image 对象相对于原点的位置？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS die Position eines Bildobjekts relativ zu seinem Ursprung 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 Position des Image-Objekts relativ zum Ursprung zu ermitteln, verwenden wir die Methode getPointByOrigin.

Grammatik

getPointByOrigin(originX: String, originY: String): fabric.Point

Nach dem Login kopieren

Parameter

originX – Dieser Parameter akzeptiert einen String, der den horizontalen Ursprung angibt. Mögliche Werte sind „links“, „Mitte“ oder „rechts“.
originY – Dieser Parameter akzeptiert einen String, der den vertikalen Ursprung darstellt. Mögliche Werte sind „Top“, „Center“ oder „Bottom“.

Verwenden Sie die Methode getPointByOrigin

Beispiel

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

getPointByOrigin zu sehen. Die Methode getPointByOrigin gibt die Objektkoordinaten des vom Benutzer angegebenen Ursprungs zurück. In diesem Beispiel verwenden wir auch die Methode getCenterPoint, damit Sie den wahren Mittelpunkt des angegebenen Bildobjekts sehen können. Und wenn wir die Methode getPointByOrigin verwenden, verwenden wir den unteren linken Punkt als Ursprung, sodass die aufgezeichnete Ausgabe x= 110 und y= 132 ist.

<!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 getPointByOrigin method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the coordinates
   </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 getCenterPoint method
      console.log(
         "The real center point of the object is: ",
         image.getCenterPoint()
      );
      
      // Using getPointByOrigin method
      console.log(
         "The coordinates returned while using getPointByOrigin method are: ",
         image.getPointByOrigin("left", "bottom")
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die Methode

getPointByOrigin mit unterschiedlichen Werten

Beispiel

In diesem Beispiel verwenden wir die Methode

getPointByOrigin, um die Koordinaten des Bildobjekts abzurufen, wenn die horizontalen und vertikalen Mittelpunkte „rechts“ und „oben“ sind. Das bedeutet, dass der obere rechte Punkt als Mittelpunkt betrachtet wird.

<!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 getPointByOrigin method with different values</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the coordinates
   </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 getPointByOrigin method
      console.log(
         "The coordinates returned while using getPointByOrigin method are: ",
         image.getPointByOrigin("right", "top")
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFabricJS – Wie erhalte ich die Position eines Bildobjekts relativ zum Ursprung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!