Custom component + gradient + transparent child component


#1

I ran into a small issue, but I can’t figure out what I’m doing wrong.

I have a custom component that fills the background with a gradient.
That component “owns” a slider (for example).
Problem: When I move the slider, the transparent areas draw the window background color, and not my gradient color. In other words, the control (i.e. the slider) is redrawing itself, but it isn’t calling redraw in my custom component in order to redraw the gradient, hence what you see is the window background color.

Here is my super basic pseudo code:

[code]class MyCustomComponent : public Component
{
MyCustomComponent() { addAndMakeVisible( new Slider() ); }

paint(Graphics &g) { g.setGradientFill(…); g.fillRect(…); }
};[/code]

Thoughts anyone?


#2

You should check “Component::setOpaque()” documentation.


#3

Hi, thanks for the response, but I’m not sure how would that help.
The documentation doesn’t say much about the situation I describe, except for the following line:

which in the end it doesn’t apply in this case.
The slider obviously needs transparency, so there is no point in “forcing” it to be opaque.
The parent component is also transparent because it paints its background as a rounded rect, but even then, I tried setting opacity to true (just as a test) and that didn’t help.

I’m sure I’m overseeing something simple. Could you expand a bit your response?

Thanks.


#4

I was effectively speaking about “any” of the parent component to be opaque.
From the pseudo code you’ve posted, it should work (check the demo it does exactly that).

I wonder if you’ve overloaded some other method that’s changing the clip region for redrawing, or if you’re somehow preventing redraw to happen (like, for example, calling “redraw” in a paint routine, or in a message processing routine).

Also, you didn’t say if you’re running on Windows / Linux / Mac. On Linux, the X server must have the composite extension enabled for this to work (if the parent is not opaque).


#5

X-Ryl669, thanks again for your response.

I’m glad you mention the Demo. The difference between the demo and my issue is that it fills the background with a solid color. In my case, that also works fine.
In order to repro what I’m seeing, simply add the following lines in the “DemoPageComp” and you’ll see that as you hover on the sliders, the gradient doesn’t paint:

    //Add me to WidgetsDemo.cpp line 302    
    void paint (Graphics& g)
    {
        const juce::Rectangle<int> rect = g.getClipBounds();
        g.setGradientFill( ColourGradient( Colours::red, 0.f, 0.f, Colours::darkred, 0.f, rect.getHeight(), false));            
        g.fillRect(0, 0, rect.getWidth(), rect.getHeight()); 
    } 

Oh, and I’m seeing this on Mac OS X, but can try it on windows also. I’ll report back.


#6

You’re drawing your rectangle in a silly place… The clip region is NOT the same as the bounds of your component.


#7

Heh… :oops: indeed, good point. Using the component bounds solved it!!! Thanks!