在Silverlight XAML中剪切旋转的矩形

Question

我正在尝试剪切旋转的矩形，其方式与剪切缩放矩形的方式类似。这是一些简单的代码：

<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>

在第一个例子中，我可以通过缩放（缩小）剪裁区域来剪切缩放（扩展）矩形。在第二个例子中，我想做类似的事情 - 保持黄色矩形表示的剪裁区域以某种方式操纵红色矩形剪辑的Transform对象。这应该不难，但我看不出来。感谢您的任何建议。

Answer 1

此：

<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>

会给你这个：

[红色矩形与您的示例相同，只是删除了Canvas.Top / Canvas.Left setters]

那是你在找什么？

编辑：

抱歉，没有注意到Silverlight标签。

试试这个：

<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>

KaXaml中的视觉效果相同。