Heim > Artikel > Web-Frontend > FabricJS – Wie zentriere ich ein Linienobjekt vertikal im aktuellen Ansichtsfenster der Leinwand?
FabricJS – Wie zentriere ich ein Linienobjekt vertikal im aktuellen Ansichtsfenster der Leinwand?
- WBOYnach vorne
- 2023-09-14 12:41:091849Durchsuche
In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS ein Linienobjekt vertikal im aktuellen Ansichtsfenster 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 vertikal im aktuellen Ansichtsfenster der Leinwand zu zentrieren, verwenden wir die Methode viewportCenterV.
Syntax
viewportCenterV(): fabric.Object
Standarddarstellung von Linienobjekten
Beispiel
Sehen wir uns ein Codebeispiel an, um zu sehen, wie unser Linienobjekt aussieht, ohne die Methode viewportCenterV zu verwenden. In diesem Fall wird das Linienobjekt nicht vertikal 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 is not centered vertically with respect to the current viewport of 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: 6,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Verwenden Sie die viewportCenterVMethode
Beispiel
Schauen wir uns ein Codebeispiel an, um zu sehen, wann Verwenden Sie die Methode viewportCenterV. In diesem Fall wird unser Linienobjekt vertikal zentriert sein Relativ zum aktuellen Ansichtsfenster der Leinwand.
<!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 viewportCenterV method</h2>
<p>
You can see that the line object is centered vertically with respect to the current viewport of 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: 6,
});
// Add it to the canvas
canvas.add(line);
// Using the viewportCenterV method
line.viewportCenterV();
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonFabricJS – Wie zentriere ich ein Linienobjekt vertikal im aktuellen Ansichtsfenster der Leinwand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!