Feathering a component

Hi, I wanted to apply some graphics effects to a component, in the form of feathering/fading the top and bottom 5% of the rendered component but I’m not sure how to go about this.

So I’d like the component to render as normal with all it’s contents, but then I’d like to be able to “grab” that rendered content and apply the feather before it was finally rendered.

Trying to get my head round if this is possible at all and how it would be done if it is?

Any pointers appreciated. thx

Haven’t done that so far, but I think you could inherit ImageEffectFilter and set it to your Component using setComponentEffect().

Looks straight forward to override the applyEffect (…).

I am looking for a way to draw in the alpha channel of the image only though. Worst case scenario would be to use Image::multiplyAlphaAt (x, y, alpha), but there must be a better way to draw a gradient into the alpha channel…

Hi, thx for the suggestion. Will check it out.

I used the multplyAlphaAt() and it works fine, but as you say, seems there must be some way to just draw a gradient fill into the image buffer? Not to up with all the graphics stuff…

The JUCE ColourGradient class and Graphics::setGradientFill might do the job?

I was wondering about the bool flag fillAlphaChannelWithCurrentBrush in Graphics::drawImage()

I never came around a Brush in JUCE at any other place… should this be the GradientFill?

I cleaned up a bit my closet and put various image processing stuff I did so far into a module:

This method would allow you to multiply alpha channels of two images, so just draw your feathered border once into a SingleChannel image and multiply it to the :

2 Likes