零元學Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲線(上) | 小猴子點部落 - 點部落

2011-03-29

零元學Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲線(上)

幾何外部的 UIElement 會在呈現的配置中以視覺化方式裁剪。幾何不一定要是矩形。

裁剪區域是幾何的「外部」。換句話說，如果幾何是用來做為 Path 而非裁剪的資料，所顯示 (未裁剪) 內容的幾何區域即具有 Fill 屬性。

裁剪區域是指落在幾何覆疊外部的任何區域。

對於複雜的幾何而言，區域的裁剪與否會受到幾何的 FillRule 的影響。

開場白不知道怎麼寫....那讓我們直接進入主題吧!!!!!!

在畫面上先後置入Rectangle以及Ellipse，並且使之有部分的交疊

接著，在Rectangle上點擊右鍵->Path->Make Clipping Path

出現Make Clipping Path的對話視窗

選擇要被路徑剪裁的物件(Choose the object that will be clipped by the path)->Ellipse

來看一下結果：

以及XAML：

<Grid x:Name="LayoutRoot" Background="White">
		
    <Ellipse Fill="#FF0D00AF" 
		
             HorizontalAlignment="Left" 
		
             Margin="38,212,0,115" 
		
             Stroke="Black" 
		
             Width="153" 
		
             StrokeThickness="0" 
		
             Clip="M75,-129 L493,-129 L493,91 L75,91 z"/>
		
</Grid>

我們直接做另一個是從Ellipse截掉Rectangle的操作，來比較差異

在Ellipse上點擊右鍵->Path->Make Clipping Path->Rectangle

出現Make Clipping Path的對話視窗

選擇要被路徑剪裁的物件(Choose the object that will be clipped by the path)->Rectangle

來看一下結果：

以及XAML：

<Grid x:Name="LayoutRoot" Background="White">
		
    <Rectangle Fill="#FFFF00AF" 
		
               Margin="214,62,56,222" 
		
               Stroke="Black" 
		
               StrokeThickness="0" 
		
               Clip="M59,193 C59,228.34622 25.869072,257 -15,257 C-55.869072,257 -89,228.34622 -89,193 C-89,157.65378 -55.869072,129 -15,129 C25.869072,129 59,157.65378 59,193 z"/>
		
</Grid>