如何使用 FabricJS 查找 IText 中的文本框高度?

王林
풀어 주다: 2023-09-14 15:17:16
앞으로
1300명이 탐색했습니다.

如何使用 FabricJS 查找 IText 中的文本框高度?

在本教程中,我们将学习如何使用 FabricJS 查找 IText 中的文本框高度。 IText 类是在 FabricJS 版本 1.4 中引入的,它扩展了 Fabric.Text 并用于创建 IText 实例。 IText 实例使我们可以自由选择、剪切、粘贴或添加新文本,而无需额外配置。还有各种支持的按键组合和鼠标/触摸组合使文本具有交互性,而 Text 中未提供这些组合。

然而,基于 IText 的 Textbox 允许我们调整文本矩形的大小并自动换行。对于 IText 来说情况并非如此,因为高度不会根据换行进行调整。我们可以通过使用各种属性来操作 IText 对象。同样,我们可以使用 calcTextHeight 方法计算文本框的高度。

语法

calcTextHeight()
로그인 후 복사

示例 1

使用 calcTextHeight 方法

让我们看一个代码示例,看看使用 calcTextHeight 方法时 IText 对象是什么样子。在这种情况下,将返回文本高度。




   
   

Using the calcTextHeight method

You can open console from dev tools and see that the text height value is being displayed in the console

로그인 후 복사

示例 2

使用 calcTextHeight 方法计算增加的​​文本框高度

在此示例中,我们通过添加额外的文本行故意增加了文本框的高度。因此,calcTextHeight 方法返回增加的文本框高度,在本例中约为 97.632。




   
   

Using the calcTextHeight method to calculate increased text box height

You can open console from dev tools and see that the text height value being displayed in the console has increased

로그인 후 복사

위 내용은 如何使用 FabricJS 查找 IText 中的文本框高度?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!