ClipToBounds not respected with CornerRadius enabled

Bug Reports
1

Hi,

could you please check this. As the result is not expected .

  • v0.27
  • macOS
  • Local Preview / iOS Simulator
<Rectangle ClipToBounds="true" CornerRadius="10" Width="300" Height="300" Alignment="Center" Color="#f0f0f0">
	<Rectangle Width="50" Height="50"  Color="#ff00f0" Alignment="TopRight" X="5" Y="-5"/>
</Rectangle>
2

ClipToBounds is clipping to the rectangular, screen-aligned bounds of an element, not to the precise shape. I don’t know what made you expect otherwise, but this is what it was always indented to do.

3

Thank you Erik,

Now i understand Cliping to the boundary not to the edges of the shape object .

Is there any way to archive this ? ( to be honest i thought it could be similar to Css property overflow: hidden ).

<div style="
    width: 300px;
    height: 300px;
    background: #acaaaa;
    border-radius: 7px;
    overflow: hidden;
">
	<div style="
    width: 50px;
    height: 50px;
    background: red;
"></div>
</div>
4

We don’t have general masking support at the moment. We do have the Mask-effect, which allows you to mask some element with an image, and sometimes people can get mask-like behavior by using ImageFills on Shapes.

Support for a bit more general masking (element to element masking) is something we’ve been playing around with internally, but we’re not quite there yet, unfortunately.