I want to generate a text display box with a background image (replacing the image with the background color here), but I have encountered a problem. If the size of the text changes, it will be overwritten due to insufficient plane size. I hope the size of the plane changes according to the size of the text, and the size is just enough to display the text. What should I do?
think of the plane as the canvas of the gui. So I changed it to something inside the canvas.
https://www.babylonjs-playground.com/#21LH5D#3
If you want to change the size every time you change the text
labelText.onTextChangedObservable.add(()=>{
labelRect.width =`${String(labelText.text.length * 20)}px`;
})
Thank you for your reply, but in this example, modifying the fontSizeInPixels attribute text will still exceed the background. The effect I want is to modify the font size so that the background size changes accordingly
Hi,
A couple of comments here:
The plane you are creating is the ‘canvas’ of your advanced dynamic texture. It’s a mesh canvas in this case, so it’s essentially ‘a mesh’. It does have parameters on creation to enter width and height but these do not update. And even if they would, they do not update with a change in the ADT. The ADT itself is projected as a texture on the plane (and comes with a resolution).
So, in general, the plane you set your advancedDynamicTexture on is already of a size that’s the limit of your GUI for mesh. In absence of background or controls the ADT is transparent on the plane. It’s inside the ADT that you will be able to scale and rescale containers (your rectangle) to eventually adapt to the height or width of your textBlock or other children.
Now, there a few things with the resize from a textBlock using adaptHeight or adaptWidth to children.
First thing is, if you are using ‘word wrap’ you cannot adapt BOTH height and width. It’s kind of logical because the program wouldn’t know where to wrap the text. In which case you would need to have a fixed width.
The other thing of importance is ‘resizeToFit’ on the textBlock. A textBlock is in fact a two part assembly that is not exposed as such to the user but it is. It’s a ‘block’ and 'a ‘text’ inside that block. Kind of similar to the css inline-block. So in order to have your text already resize your block to fit your text, you need to set ‘resizeToFit = true’.
May be have a go at this PG below. Try to comment/uncomment, ‘adaptHeight’, ‘adaptWidth’ on the rectangle container and ‘resizeToFit’ and ‘textWrapping’ on the textBlock.
With word wrap and fixed width:
With no wrap and adapt both width and height:
3 Likes
Thank you very much for your answer. I have another small question. In the code, set the height and width of the Plane to 100. When the fontSizeInPixels value is 20, it can display completely, but when it is changed to 100, it cannot be fully realized. I would like to know the conversion relationship, such as the pixel size of the TextBlock. What size should the Plane be set to?
The relation is at two levels. The size of the plane defines the area, beter said the maximum area where you want your GUI to display. Create a plane of this maximum size, eventually don’t put a texture on it or use the default material to visualize the size your plane. Once you are happy with the maximum size covered by your plane, it’s time to add the ADT to it. As I said, the ADT comes with a resolution (line 17 in the PG, the two last parameters for width and height expressed in pixels. This resolution should match the ratio of your plane. Next any texture or parameters expressed in pixels inside this ADT are related to the resolution of the ADT (not the plane size). If you use a higher resolution, the text will be smaller. If you use a smaller resolution, the text will be bigger.