码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-25 01:02:26      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:出差   com   曲线   ext   接受   width   使用   问题   属性   

原文:零元学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修出想要的完美曲线(上)

标签:出差   com   曲线   ext   接受   width   使用   问题   属性   

原文地址:http://www.cnblogs.com/lonelyxmas/p/8099589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!