CODEWITHSUNDEEP
silverlightxaml
Shunyata Kharg
Shunyata Kharg

Reputation: 947

Clipping rotated rectangle in Silverlight XAML

I am trying to clip a rotated rectangle, in a similar fashion to the way I can clip a scaled rectangle. Here's some simple code:

<Canvas>
  <!--first example: clipping (transparent yellow) correctly clips scaled rectangle -->
  <Rectangle Fill="Red" Width="200" Height="200" Canvas.Left="20" Canvas.Top="20">
    <Rectangle.Clip>
      <RectangleGeometry Rect="0, 0, 200, 100">
        <RectangleGeometry.Transform>
          <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
        </RectangleGeometry.Transform> 
      </RectangleGeometry>
    </Rectangle.Clip>
    <Rectangle.RenderTransform>
      <ScaleTransform ScaleX="2" ScaleY="2"/>
    </Rectangle.RenderTransform>
  </Rectangle>
  <Rectangle Width="200" Height="100" Canvas.Left="20" Canvas.Top="20">
    <Rectangle.Fill>
      <SolidColorBrush Color="Yellow" Opacity="0.5"/>
    </Rectangle.Fill>
  </Rectangle>
  <!--second example: clipping (transparent yellow) incorrectly clips rotated rectangle -->
  <Rectangle Fill="Red" Width="200" Height="200" Canvas.Left="20" Canvas.Top="250">
    <Rectangle.Clip>
      <RectangleGeometry Rect="0, 0, 200, 100">
        <RectangleGeometry.Transform>
          <RotateTransform CenterX="100" CenterY="100" Angle="0"/>
        </RectangleGeometry.Transform>
      </RectangleGeometry>
    </Rectangle.Clip>
    <Rectangle.RenderTransform>
      <RotateTransform CenterX="100" CenterY="100" Angle="45"/>
    </Rectangle.RenderTransform>   
  </Rectangle>
  <Rectangle Width="200" Height="100" Canvas.Left="20" Canvas.Top="250">
    <Rectangle.Fill>
      <SolidColorBrush Color="Yellow" Opacity="0.5"/>
    </Rectangle.Fill>
    <Rectangle.RenderTransform>
      <RotateTransform CenterX="100" CenterY="100" Angle="0"/>
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

In the first example I can clip the scaled (expanded) rectangle by scaling (shrinking) the clipping area. In the second example I'd like to do something similar - keep the clipping area represented by the yellow rectangle by somehow manipulating the Transform object of the clip of the red rectangle. This shouldn't be difficult, but I can't see it. Thanks for any suggestions.

Upvotes: 2

Views: 601

Answers (1)

XAMeLi
XAMeLi

Reputation: 6289

This:

<Grid Background="Yellow" Canvas.Left="400" Canvas.Top="50" ClipToBounds="True" Width="200" Height="100">
    <Rectangle Fill="Red" Width="200" Height="200">
        <Rectangle.Clip>
            <RectangleGeometry Rect="0, 0, 200, 100">
                <RectangleGeometry.Transform>
                    <RotateTransform CenterX="100" CenterY="100" Angle="0"/>
                </RectangleGeometry.Transform>
            </RectangleGeometry>
        </Rectangle.Clip>
        <Rectangle.RenderTransform>
            <RotateTransform CenterX="100" CenterY="100" Angle="45"/>
        </Rectangle.RenderTransform>   
    </Rectangle>
</Grid>

Will give you this:

Clipped rectangle in a grid

[The red rectangle is the same as from your example, just removed Canvas.Top/Canvas.Left setters]

Is that what you were looking for?

EDIT:

Sorry, didn't notice the Silverlight tag.

Try this:

<Grid Background="Yellow" Width="200" Height="100">
    <Grid.Clip>
        <RectangleGeometry Rect="0, 0, 200, 100"/>
    </Grid.Clip>
    <Rectangle Fill="Red" Width="200" Height="200">
        <Rectangle.Clip>
            <RectangleGeometry Rect="0, 0, 200, 100">
                <RectangleGeometry.Transform>
                    <RotateTransform CenterX="100" CenterY="100" Angle="0"/>
                </RectangleGeometry.Transform>
            </RectangleGeometry>
        </Rectangle.Clip>
        <Rectangle.RenderTransform>
            <RotateTransform CenterX="100" CenterY="100" Angle="45"/>
        </Rectangle.RenderTransform>   
    </Rectangle>
</Grid>

Same visual result in KaXaml.

Upvotes: 1

Related Questions