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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上)相关的知识,希望对你有一定的参考价值。

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

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

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

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

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

?

?

开场白不知道怎麽写....那让我们直接进入主题吧!!!!!!

?

?

01

在画面上先後置入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>

		

		

	

?

?

02

我们直接做另一个是从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>

		

		

	

?

看出差异了吗?

?

?

?

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

?

03

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

技术分享图片

?

以上在MSDN的解释如下:

(原文)

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

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

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

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

?

如果以图片说明:

技术分享图片

?

?

?

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

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

?

?

?

?

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

?

?

一步一步迈向HIE之路

 

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

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

 

 








以上是关于零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上)的主要内容,如果未能解决你的问题,请参考以下文章

零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

零元学Expression Blend 4 &ndash; Chapter 21 以实作案例学习MouseDragElementBehavior