How do create a mask and draw on it

Question

I have 2 rectangles like the image below :

now I want to only draw the part of yellow rectangle (B) that is inside the red rectangle. So i set clipchildreen=True to the rectangle A and I get this :

But it's not good as part of the yellow rectangle outside the red rectangle is still drawed. I want to obtain this :

How Can I do ? Eventually I can draw directly on the canvas but even like this I didn't find a simple way to achieve what I want to do

Answer 1

Here is a solution that might suit you, although I've made some assumptions about what your requirements are, and it's not a particularly straightforward approach. It involves using a rectangle with InnerRound corners to hide part of the yellow square.

For the steps below, I'm assuming that the form is white, the yellow square is 50 x 50, the red square is 150 x 150, the round corners have a radius of 20, and the whole thing is positioned on the form at 100,100.

I've described this as though you are manually positioning all the controls straight onto the form, but if I was doing it I'd add a couple of TLayouts and use Aligns everywhere (with negative margins in the case of the fourth step). And you might do this on a panel or other control instead of directly on the form.

Note that the z-order is important, which is why steps 2 to 5 below should be done in that order.

1. Set Fill.Kind of the form to Solid.
2. Place a TRectangle at 100,100. Set both XRadius and YRadius to 20, both Width and Height to 150, Fill.Color to Red and Stroke.Kind to None.
3. Place a TRectangle at 100,100. Set the Fill.Color to Yellow.
4. Place a TRectangle at 80,80. Set both XRadius and YRadius to 20, both Height and Width to 20, Fill.Color to White (the Fill.color of the form), Stroke.Kind to None, and CornerType to InnerRound.
5. Place a TRectangle at 100,100. Set both XRadius and YRadius to 20, both Height and Width to 150, and Fill.Kind to None.

This is the result: