如何在P5.js中查找多行文本的文本边界？

我需要创建自动调整大小的文本，设置一些框大小：

text(textContent, textX, textY, textWidth, textHeight);

---

问题是文本是多行的，因为它不能放在一行上。好的，然后我尝试检查textBounds，但它只对一行字符串有效。如何在某个框/矩形（textWidth，texthheight）中找到文本绘图的边界？

我理解你的问题有点困难。但是，如果您想创建一个包含所有文本的框，您可以实现如下内容：

假设我们将文本存储到这样的对象中，以使逻辑更易于阅读：

var text1={
“str”：“这是第一行”，
X1:0，
Y1:0，
X2:300，
Y2:100，
尺码：30
}
变量text2={
“str”：“这是第2行”，
X1:0，
Y1:30，
X2:300，
Y2:100，
尺码：20
}

X1，Y1是左上角坐标，X2，Y2是右下角坐标

现在我们有了一个数据模型。我们只需将边界合并成一个矩形

记住： 矩形声明如下：

Rect（X，Y，宽度，高度）

这正是

textBounds（）

给我们的信息

下面是一个快速而肮脏的数学示例：

函数绘图（）{
textSize（this.text1.size）；
text（this.text1.str、this.text1.X1、this.text1.Y1、this.text1.X2、this.text1.Y2）；
textSize（this.text2.size）；
text（this.text2.str、this.text2.X1、this.text2.Y1、this.text2.X2、this.text2.Y2）；
//获取每个文本的文本边界对象
设text1box=this.font.textBounds（this.text1.str、this.text1.X1、this.text1.Y1、this.text1.size）
设text2box=this.font.textBounds（this.text2.str、this.text2.X1、this.text2.Y1、this.text2.size）
//获取所有文本的边框的左上角和右下角坐标
设界限={
x1:min（text1box.X，text2box.X），//左上角X
y1:min（text1box.Y，text2box.Y），//左上方Y
x2:max（text1box.x+text1box.w，text2box.x+text2box.w），//右下角x
y2:max（text1box.y+text1box.y，text2box.y+text2box.h）//右下角y
}
//如果需要填充：
设填充=2；
直肠(
bounds.x1-填充，
6.y1-填充，
abs（bounds.x2，-bounds.x1）+填充，//边框的宽度
abs（bounds.y2-bounds.y1）+填充//边框的高度
)
}

要充分展示这一逻辑，有一个

这种逻辑的酷之处在于，即使文本没有完全对齐，它仍然能够在所有文本周围放置一个框