I’m a bit confused with simple problem (or too tired for today :))
I have a component which in its paint() method draws some rounded border and also contains child component which should be clipped to that border.
Well, how to clip that child component to specific shape?
I know how to use clipping regions with paths within the same paint() but how it could be done for nested components.
I found a workaround creating simple ImageEffectFilter which do the clip and using setComponentEffect() for that child comp, but I feel there is some simpler solution.
Make a Component that sits on top which has a transparent hole in the middle, in the shape of a rounded rectangle:
[attachment=0]Juce.png[/attachment]
You can do this in a single call to Graphics::fillPath(), use the winding properties of the path to first place a rectangle and then a rounded rect into the path.
After getting stuck for 2 days on making rounded corners on the DrawableButton using SVG images, I was able to do this by creating a RoundedCornersEffect class derived from ImageFilterEffect. In my IconButton class I derived from DrawableButton, I use the setComponentEffect member function. I made a setter function for the corner radius and which corners to apply it to, as well as a setter to use a rounded rectangle Path. I did try TheVinn suggestion to cover the image area with a rectangle with the rounded rectangle clipped out of it. However, that solution works if you have the background color of the parent Component to fill those 4 areas outside of the rounded rectangle area. If you use DropShadow behind it, the better solution is to reduceClipRegion in the ImageEffectFilter::applyEffect prior to drawImageAt.
