如何在画布上绘制适合给定矩形的文本

How to draw text fitting in a given rectangle on a canvas?

本文关键字：文本 绘制      更新时间：2023-09-26

我正在使用画布创建一些图像。我希望能够在画布上以给定的矩形（即偏移 x、偏移 y、宽度和高度）绘制文本，并且该文本尽可能大而不会溢出，如果可能的话，使用自动换行。可能吗？

这是可能的。

  1. 无包装：您可以使用CanvasRenderingContext2D.measureText()方法，该方法接受字符串并返回对象 { width： float }。您必须通过使用字体的大小进行一些数学计算来找出高度。然后只需以二叉搜索方式枚举字体大小。很快，您就会找到最适合画布的尺寸。

  2. 包皮：您必须找出字符串中的包装点并自己计算它们的宽度和高度。

但是有一种更好的更简单的方法可以做到这一点。

创建一个隐藏（可见性：隐藏不显示：无）div，定义其宽度，并将文本放入其中。 枚举字体的大小，并检查它是否溢出或增长得太高。

相关文章：