How to find text bounds for multilined text in P5.js? - p5.js

Question

I need to create autosized text setting some box size:
text(textContent, textX, textY, textWidth, textHeight);
The problem is that the text is multilined because it can't place on one line. Ok, then I've tried to check textBounds - but it works only with one line of string. How to find bounds for text drawing in some box/rect (textWidth, textHeight)?

Answer 1

I am having a little difficulty understanding your question. But if you wanted to create a box that encompassed all the text you could implement something like the following:
Lets assume we have our text stored to objects like this to make the logic easier to read:
var text1 = {
"str" : "This Is Line One",
X1: 0,
Y1: 0,
X2: 300,
Y2: 100,
size:30
}
var text2 = {
"str" : "This Is Line 2",
X1: 0,
Y1: 30,
X2: 300,
Y2: 100,
size:20
}
X1,Y1 is the upper left coordinate, and X2,Y2 is the lower right.
Now we have a data model to work with. We simply have to combine the bounds into a single rectangle.
Remember:
Rectangles are Declared like this:
Rect(X,Y,Width,Height)
Which is exactly the information textBounds() gives us!
Here is a quick and dirty example of the math:
function draw() {
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);
//Get Text Bounds object for each text
let text1box = this.font.textBounds(this.text1.str,this.text1.X1,this.text1.Y1,this.text1.size)
let text2box = this.font.textBounds(this.text2.str,this.text2.X1,this.text2.Y1,this.text2.size)
//Get the upper-left and lower-right coordinates of the bounding rectangle of all the text
let bounds = {
x1: min(text1box.X,text2box.X), //upper left x
y1: min(text1box.Y,text2box.Y), //uper left y
x2: max(text1box.x + text1box.w,text2box.x + text2box.w), //lower right x
y2: max(text1box.y + text1box.y,text2box.y + text2box.h) //lower right y
}
//if you want padding:
let padding = 2;
rect(
bounds.x1 - padding,
bounds.y1 - padding,
abs(bounds.x2, - bounds.x1) + padding, //Width of the bounding rectangle
abs(bounds.y2 - bounds.y1) + padding //Height of the bounding rectangle
)
}
To fully show the logic here is a quick diagram I made
The cool thing about this logic is that even if the text isn't lined up perfectly, it is still able to put a box around all the text.