Home > Article > Web Front-end > How to find textbox height in IText using FabricJS?
How to find textbox height in IText using FabricJS?
- 王林forward
- 2023-09-14 15:17:161379browse
In this tutorial, we will learn how to find the height of a text box in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.
However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Similarly, we can calculate the height of the text box using the calcTextHeight method.
grammar
calcTextHeight()
Example 1
Use calcTextHeight method
Let's look at a code example to see what an IText object looks like when using the calcTextHeight method. In this case, the text height will be returned.
<!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 calcTextHeight method</h2>
<p> You can open console from dev tools and see that the text height value 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 an itext object
var itext = new fabric.IText("Add sample text here.", {
width: 300,
left: 60,
top: 70,
fill: "red",
});
// Add it to the canvas
canvas.add(itext);
// Using calcTextHeight method
console.log("The text height is: ", itext.calcTextHeight());
</script>
</body>
</html>
Example 2
Use the calcTextHeight method to calculate the increased height of the text box
In this example, we intentionally increased the height of the text box by adding extra lines of text. Therefore, the calcTextHeight method returns the increased height of the text box, which in this case is approximately 97.632.
<!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 calcTextHeight method to calculate increased text box height
<p> You can open console from dev tools and see that the text height value being displayed in the console has increased </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 an itext object
var itext = new fabric.IText("Add sample text here.Lorem ipsum dolor
sit amet", {
width: 300,
left: 60,
top: 70,
fill: "red",
});
// Add it to the canvas
canvas.add(itext);
// Using calcTextHeight method
console.log("The new text height is: ", itext.calcTextHeight());
</script>
</body>
</html>
The above is the detailed content of How to find textbox height in IText using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!