Heim > Artikel > Web-Frontend > FabricJS – Wie erhalte ich die Position eines Bildobjekts relativ zum Ursprung?
FabricJS – Wie erhalte ich die Position eines Bildobjekts relativ zum Ursprung?
- 王林nach vorne
- 2023-09-16 20:05:021163Durchsuche
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
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
BeispielSehen 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>
Verwenden Sie die Methode getPointByOrigin mit unterschiedlichen Werten
BeispielIn 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>
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!