在本教程中，我們將學(xué)習(xí)如何使用 FabricJS 查找 IText 中的文本框高度。 IText 類(lèi)是在 FabricJS 版本 1.4 中引入的，它擴(kuò)展了 Fabric.Text 并用于創(chuàng)建 IText 實(shí)例。 IText 實(shí)例使我們可以自由選擇、剪切、粘貼或添加新文本，而無(wú)需額外配置。還有各種支持的按鍵組合和鼠標(biāo)/觸摸組合使文本具有交互性，而 Text 中未提供這些組合。
然而，基于 IText 的 Textbox 允許我們調(diào)整文本矩形的大小并自動(dòng)換行。對(duì)于 IText 來(lái)說(shuō)情況并非如此，因?yàn)楦叨炔粫?huì)根據(jù)換行進(jìn)行調(diào)整。我們可以通過(guò)使用各種屬性來(lái)操作 IText 對(duì)象。同樣，我們可以使用 calcTextHeight 方法計(jì)算文本框的高度。
語(yǔ)法
calcTextHeight()
登錄后復(fù)制
示例 1
使用 calcTextHeight 方法
讓我們看一個(gè)代碼示例，看看使用 calcTextHeight 方法時(shí) IText 對(duì)象是什么樣子。在這種情況下，將返回文本高度。
<!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>
登錄后復(fù)制
示例 2
使用 calcTextHeight 方法計(jì)算增加的??文本框高度
在此示例中，我們通過(guò)添加額外的文本行故意增加了文本框的高度。因此，calcTextHeight 方法返回增加的文本框高度，在本例中約為 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>
登錄后復(fù)制
以上就是如何使用 FabricJS 查找 IText 中的文本框高度？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
