2

スケーリングされた長方形をクリップできる方法と同様の方法で、回転した長方形をクリップしようとしています。簡単なコードを次に示します。

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

最初の例では、クリッピング領域をスケーリング (縮小) することで、スケーリング (拡張) された四角形をクリップできます。2 番目の例では、似たようなことをしたいと思います。赤い四角形のクリップの Transform オブジェクトを何らかの方法で操作して、黄色の四角形で表されるクリッピング領域を維持します。これは難しくないはずですが、見えません。提案をありがとう。

4

1 に答える 1

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セッターを削除しただけです]

それはあなたが探していたものですか？

編集：

申し訳ありませんが、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 での視覚的な結果は同じです。

于 2013-10-17T18:29:31.367 に答える