零元學Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲線(上)
2012-10-29 13:50
246 查看
開場白不知道怎麼寫....那讓我們直接進入主題吧!!!!!!
01
在畫面上先後置入Rectangle以及Ellipse,並且使之有部分的交疊
接著,在Rectangle上點擊右鍵->Path->Make
Clipping Path
出現Make
Clipping Path的對話視窗
選擇要被路徑剪裁的物件(Choose
the object that will be clipped by the path)->Ellipse
來看一下結果:
以及XAML:
02
我們直接做另一個是從Ellipse截掉Rectangle的操作,來比較差異
在Ellipse上點擊右鍵->Path->Make
Clipping Path->Rectangle
出現Make
Clipping Path的對話視窗
選擇要被路徑剪裁的物件(Choose
the object that will be clipped by the path)->Rectangle
來看一下結果:
以及XAML:
看出差異了嗎?
沒有的話沒關係,看下去就知道!
03
左邊為由矩形路徑截掉的圓形,右邊為由圓形路徑截掉的矩形
以上在MSDN的解釋如下:
(原文)
幾何外部的 UIElement 會在呈現的配置中以視覺化方式裁剪。
幾何不一定要是矩形。
裁剪區域是幾何的「外部」。
換句話說,如果幾何是用來做為 Path 而非裁剪的資料,所顯示
(未裁剪) 內容的幾何區域即具有 Fill 屬性。
裁剪區域是指落在幾何覆疊外部的任何區域。
對於複雜的幾何而言,區域的裁剪與否會受到幾何的 FillRule 的影響。
如果以圖片說明:
以上對Clip的介紹,到此告一個段落~
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的介紹,到此告一個段落~
相关文章推荐
- 零元學Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲線(下)
- 零元学Expression Blend 4 - Chapter 37 看如何使用Clip修出想要的完美曲线(上)
- 零元学Expression Blend 4 - Chapter 38 看如何使用Clip修出想要的完美曲线(下)
- 《捕鱼达人 3》主程洪志雄专访:如何使用Cocos2d-x完美呈现捕鱼3
- 如何将Anaconda更新到想要的python版本(其实使用的是Anaconda中的切换不同环境的方法,不过步骤挺好)
- 手机使用了QWERTY keypad,想要在idle home screen时长按SHIFT键进行静音模式切换,该如何修改代码
- 新手如何装一个完美系统 使用深度重装系统教程
- 零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用
- [完美解决]如何在windows安装docker toolbox,使用tensorflow,Jupyter Notebook,各种问题的解决方案
- 如何让32位Win7完美使用4G内存的方法介绍
- 如何使用自己不了解的计算机语言去实现自己想要的功能呢?
- 如何解决ecshop中jquery冲突?使用jquery.json.js代替transport.org.js中部份代码,完美解决问题。
- 如何对地图服务完美的添加图层,且不影响用户的使用
- linux find 命令中 如何使用正则表达式,为什么经常找不到想要的文件名
- 如何使香皂基地 - 使用什么你最想要的
- 关于如何使用cg中的discard/clip
- java多态使用时,如果想要调用子类特有属性如何做.
- 如何使用Win7多条件搜索 找回想要的文件
- 如何使用PHP来快速将纯ASCII文本完美地转换成为可读的HTML标记