Highlight text background

beginners
#1

I’m trying to highlight the background of some text (only the bounding box of that text) with a rectangle and alpha blending, but it won’t work.
Here’s some code I’m using:

ofEnableAlphaBlending();
ofSetColor(0, 255, 255, 255);
ofDrawRectangle(0, 0, text.stringWidth(), text.stringHeight());
ofSetColor(255, 255);
text.drawString(str, 0, 0);

I’ve both tried to render the rectangle first and the text afterward, and the other way round. I also experimented with different alpha values, it still won’t work.
Mind that I don’t want the entire background of the screen in the highlighting color, only the bounding box of the string. Am I missing something obvious?

#2

Hey @alexandrosdrymonitis , maybe try reducing the alpha values to add some transparency:

ofSetColor(0, 255, 255, 100); // translucent cyan
// draw something
ofSetColor(255, 180); // translucent white
// draw something else;
ofSetColor(255); // set global color back to opaque white

Also, I think OF_BLENDMODE_ALPHA is the default, but there are other blend modes that might work better with opaque colors.

#3

Hi @TimChi thanks for reaching out again! In the end I had to render the rectangle first with some transparency, and the font afterward with no transparency. So the following code did the trick:

ofEnableAlphaBlending();
ofSetColor(0, 255, 255, 190);
ofDrawRectangle(50, 20, 300, 50);
ofSetColor(255, 255);
font.drawString("test string", 50, 50);

Thanks again for your help!