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.
getCenterPoint(): fabric.Point
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>
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!
