Heim > Artikel > Web-Frontend > FabricJS - Wie zentriere ich ein Linienobjekt horizontal auf der Leinwand?
FabricJS - Wie zentriere ich ein Linienobjekt horizontal auf der Leinwand?
- WBOYnach vorne
- 2023-09-11 10:49:02614Durchsuche
In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Linienobjekt horizontal auf der Leinwand zentrieren. 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 fabric.Line-Instanz erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um das Linienobjekt horizontal auf der Leinwand zu zentrieren, verwenden wir die Methode centerH.
Syntax
centerH()
Standarddarstellung von Linienobjekten
Beispiel
Sehen wir uns ein Codebeispiel an, um zu sehen, wie unser Linienobjekt aussieht, ohne die Methode centerH zu verwenden. In diesem Fall wird das Linienobjekt nicht horizontal auf der Leinwand zentriert.
<!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>Default appearance of the Line object</h2>
<p>You can see that the line object has not been centered horizontally on the canvas</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([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Verwenden Sie die centerHMethode
Beispiel
In diesem Beispiel werden wir sehen, wie wir mit der Methode centerH ein Linienobjekt genau in der horizontalen Mitte der Leinwand platzieren können. In diesem Fall wird das Objekt horizontal zentriert.
<!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 the centerH method</h2>
<p>
You can see that the line object has been centered horizontally on the canvas
</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([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});
// Add it to the canvas
canvas.add(line);
// Using the centerH() method to center line object horizontally
line.centerH();
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonFabricJS - Wie zentriere ich ein Linienobjekt horizontal auf der Leinwand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!