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

原文:零元学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：

   1: <Grid x:Name="LayoutRoot" Background="White">

   2:     <Ellipse Fill="#FF0D00AF"

   3:              HorizontalAlignment="Left"

   4:              Margin="38,212,0,115"

   5:              Stroke="Black"

   6:              Width="153"

   7:              StrokeThickness="0"

   8:              Clip="M75,-129 L493,-129 L493,91 L75,91 z"/>

   9: </Grid>

我们直接做另一个是从Ellipse截掉Rectangle的操作，来比较差异

在Ellipse上点击右键->Path->Make Clipping Path->Rectangle

出现Make Clipping Path的对话视窗

选择要被路径剪裁的物件(Choose the object that will be clipped by the path)->Rectangle

来看一下结果：

以及XAML：

   1: <Grid x:Name="LayoutRoot" Background="White">

   2:     <Rectangle Fill="#FFFF00AF"

   3:                Margin="214,62,56,222"

   4:                Stroke="Black"

   5:                StrokeThickness="0"

   6:                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"/>

   7: </Grid>

看出差异了吗?

没有的话没关系，看下去就知道!

左边为由矩形路径截掉的圆形，右边为由圆形路径截掉的矩形

以上在MSDN的解释如下：

(原文)

几何外部的 UIElement 会在呈现的配置中以视觉化方式裁剪。几何不一定要是矩形。

裁剪区域是几何的「外部」。换句话说，如果几何是用来做为 Path 而非裁剪的资料，所显示 (未裁剪) 内容的几何区域即具有 Fill 属性。

裁剪区域是指落在几何覆叠外部的任何区域。

对於复杂的几何而言，区域的裁剪与否会受到几何的 FillRule 的影响。

如果以图片说明：

以上对Clip的介绍，到此告一个段落~

下回介绍进阶的使用并实作，请期待"Chapter 38 如何使用Clip修出想要的完美曲线(下)"

(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您

巴特西

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

最新文章

热门文章