零元学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之路

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

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

时间: 2024-10-04 03:28:32

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

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

原文:零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下) 你可以把Clip想成是一个遮罩,运用遮罩达到我们想要的效果 所以在这里我们把文字的范围当成是遮罩 与遮罩交叠的图片部分被截取出来 进而呈现出图片镶进文字内的效果 ? 在上篇提到了Clip的基本认识,本回要介绍进阶的使用并实作 ? 本篇范例的最後结果如下: ? ? 01 在主要工作区放入一张你喜爱的图片 并使用TextBlock->输入你想要的文字,如图: ? 02 再来,运用上

零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II

原文:零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckBox. 看Blend如何把CheckBox变成飞碟! ? 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckBox. 看Blend如何把CheckBox变成飞碟! ? ? ? 灵感取自经典动画!「怪兽大战外星人」!!!!!! ? ? ? 本章需要两张图片,一为幽浮.另一个是

零元学Expression Blend 4 - Chapter 7 什麽?影片不再是印象中的方框框!!!看Blend 4如何把影片镶入字里

原文:零元学Expression Blend 4 - Chapter 7 什麽?影片不再是印象中的方框框!!!看Blend 4如何把影片镶入字里 本章将教大家如何在Blend 4里新增Media Element,以及运用Video Brush让影片镶入你所设定的字里,使影片不再是传统的呈现方式. ? ? 本章将教大家如何在Blend 4里新增Media Element,以及运用Video Brush让影片镶入你所设定的字里,使影片不再是传统的呈现方式. ? 就是要让不会的新手都看的懂! ? ?

零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I

原文:零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画. ? 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画. ? ? ? 01 开启一个新专案,并且置入一个Button,调整到适当大小 ? 在Properties->可以调整Button的外观,基本设定都跟先前的教学雷同 不熟的人请看如何用Blend制作一

零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)

原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要教你如何建立自己的笔刷. ? 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要教你如何建立自己的笔刷. ? ? 就是要让不会的新手都看的懂! ? 01 开始专案 打开Blend後选择Top Menu的 File->New Project(快捷键Shift+

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

原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 就是要让不会的新手都看的懂! ? <专情王子?查理B> Border是Blend里最简单的布局容器,可以使用Borde

零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton

原文:零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」 附上简单的范例,请点击进行换页,并注意换页内容 范例请点我 ? 跟着范例做做看吧! 01 使用小猴子附上的的范例档案,或是自己做一个类似下图的版面 ? (范例内的

零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计

原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 就是要让不会的新手都看的懂! ? ------------------

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

原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」. ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」. ? ? ? 就是要让不会的新手都看的懂! ? ? ? <实至名归的容器大哥> Blend 4内的容器有很多种,比较常运用到的除了有Grid.Can