How to draw an outline around a text

General JUCE discussion
1

Hi,

I’m trying to add a white outline around a line of text so that it can be read on any background colour.
I’ve tried different strategies: draw the text twice with different font sizes, drawFitted twice to different bounding boxes, and apply affine transforms but I’m not really satisfied with the output.

Is there a nicer way of doing this?

2 Likes
2

Convert the text to Path, stroke the path with 2px white, then fill the Path with your text color.

2 Likes
3

You could also draw the text to an image and apply a white DropShadowEffect.

4

For a completely different approach, if you’re ok with drawing the background into an Image and then performing your own compositing operations, have a look at this Graphics Gem:

XOR Drawing With Guaranteed Contrast (books.google.com)

1 Like
5

I did what you suggested and the result is good enough for me. I knew I could count on you :wink:
Something like that:

juce::Path textPath;
juce::GlyphArrangement glyphs;
glyphs.addFittedText( font, getName(), x, y, w, h, juce::Justification::centred, 2);
glyphs.createPath(textPath);

g.setColour (juce::Colours::white);
juce::PathStrokeType strokeType(2.5f);
g.strokePath(textPath, strokeType);
g.setColour (juce::Colours::black);
g.fillPath(textPath);

I mean, it doesn’t look as good a I expected, but it’s ok. I’ll have a look at your XOR suggestion when I have some time :slight_smile:

2 Likes