In diesem Tutorial lernen wir, wie man mit FabricJS die Zeilenhöhe am gewünschten Zeilenindex im Text berechnet. Wir können Text auf der Leinwand anzeigen, indem wir eine Instanz von Fabric.Text hinzufügen. Es ermöglicht uns nicht nur das Verschieben, Skalieren und Ändern der Textabmessungen, sondern bietet auch zusätzliche Funktionen wie Textausrichtung, Textdekoration und Zeilenhöhe, die über die Eigenschaften textAlign, underline bzw. lineHeight verfügbar sind. Wir können die Zeilenhöhe auch am gewünschten Zeilenindex mit der Methode getHeightOfLine berechnen.
getHeightOfLine(lineIndex: Number)
lineIndex – Dieser Parameter akzeptiert Number als Wert. Der angegebene Wert bestimmt den Index der Linie, deren Höhe wir berechnen möchten.
Verwenden Sie die getHeightOfLine-Methode
Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der getHeightOfLine-Methode zu sehen. In diesem Fall wird die Höhe der Zeile am Zeilenindex 1 in der Konsole angezeigt.
<!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 getHeightOfLine method</h2>
<p>You can open console from dev tools and see that the height of line is being displayed in the console </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 text object
var text = new fabric.Text("Add sampletext here", {
width: 300,
fill: "green",
fontWeight: "bold",
});
// Add it to the canvas
canvas.add(text);
// Using getHeightOfLine method
console.log("The height of line is", text.getHeightOfLine(1));
</script>
</body>
</html>
Verwenden Sie die getHeightOfLine-Methode und übergeben Sie eine andere Schriftgröße
Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe zu sehen, wenn die getHeightOfLine-Methode mit der anderen Schriftgröße 30 verwendet wird. In diesem Fall wird die Zeilenhöhe am Zeilenindex 0 mit der angegebenen Schriftgröße angezeigt.
<!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 getHeightOfLine method and passing a different font size</h2>
<p>You can open console from dev tools and see that the height of line is being displayed in the console </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 text object
var text = new fabric.Text("Add sampletext here", {
width: 300,
fill: "green",
fontWeight: "bold",
fontSize: 30
});
// Add it to the canvas
canvas.add(text);
// Using getHeightOfLine method
console.log("The height of line is", text.getHeightOfLine(0));
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie berechnet man mit FabricJS die Höhe eines Zeichens an einer bestimmten Position im Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
