Stretching text in Layout

Is it possible to create a text that resizes with the view’s size like other GUI elements do when using ie. HLayout? In the basic example below the Knob resizes when you resize the view, but the text does not resize in the second line.

View().layout_(HLayout(Knob())).front;
View().layout_(HLayout(StaticText().string_(\Sometext))).front // no resizing of text

I’d suggest using a UserView and drawing the text yourself:

View().layout_(HLayout(UserView()
    .drawFunc_({
        |v|
        var bounds = v.bounds.moveTo(0, 0);
        var scale = bounds.height / 16.0;
        Pen.scale(scale, scale);
        Pen.stringAtPoint("string", 0@0, Font(size:12), Color.white);
}))).front;

You can use QtGUI.stringBounds to more accurately figure out the size of your string (my / 16.0 is just a guess based on font size 12).

1 Like

Thanks for suggestion. I thought there might be an easier way to do it. For my case I think I am better of resizing all the text either by .fixedSize or changing the font. What I need is a view with mostly StaticText objects to be able to alternate between two different sizes. I was hoping there was a method to stretch the text with the outer view (like Knobs, Buttons etc) but I guess not.

onResize should(?) give you a StaticText’s current size. Then you could scale the font size based on stringBounds.

hjh

Great suggestion, I will try that.

Here is some code which resizes a text based on @jamshark70’s suggestion.

(
var input = "SomeText";
var font = \Helvetica;
var size = 20;
var text = StaticText().string_(input).font_(Font(font, size));
var bounds = QtGUI.stringBounds(input, Font(font, size)).debug(\bounds);
v =
View(nil, bounds).layout_(HLayout(text))
.front.alwaysOnTop_(true);
v.onResize = {
	var wFactor = v.bounds.width / bounds.width;
	var hFactor = v.bounds.height / bounds.height;
	var factor = wFactor + hFactor;
	text.font = Font(font, size * 0.3 * factor)
};
)