Silverlight形状合并:绘制半圆

 

    如何在Silverlight中绘制如图所示的半圆?

要绘制的半圆

 

    先看XAML视图中对这个半圆的描述:

<Path Margin="117,117,116,198" Fill="#FF000000" Stretch="Fill" Stroke="#FF000000" Data="M83.5,0.5 C129.33975,0.50000429 166.5,37.660511 166.5,83.5 L166.44951,84.5 L0.55049556,84.5 L0.5,83.5 C0.50002575,37.660439 37.660152,0.50000429 83.5,0.5 z" Opacity="0.3"/>

 

    显然,如果在XAML中手动书写Data属性的值很复杂。

    可以在Expression Blend中这样操作:

    1、使用工具栏按钮中的“椭圆形”工具,按住Shift键在画布上绘制一个圆,假设该圆的半径为r;

    2、使用工具栏按钮中的“矩形”工具,在画布上绘制一个矩形,假设该矩形的宽和高分别为w和h,确保w ≥ 2 × r,并且h ≥ r,这样的矩形才能够遮盖住步骤1中所绘制圆的一半。注意:由于布局方式的选择以及XAML中对于基本形状的描述方式,可能无法从属性列表中直接找到于半径、宽度和高度等项目,只需要经过目测决定该矩形的大致大小即可;

    3、移动步骤2中绘制的矩形使得步骤2中的矩形恰好可以遮盖住步骤1中圆的下半部分,可以借助圆的默认中心点来进行矩形的定位,如图所示;

使用矩形遮盖圆的下半部分

 

    4、在画布上或对象和时间线窗口中选中矩形和圆,注意顺序是先选中矩形再选中圆,之所以强调这个顺序是因为矩形的绘制发生在圆之后,所以默认情况下矩形可以覆盖住圆的下半部分,此时,XAML视图中的代码是这样的:

<Ellipse Margin="121,95,112,138" Fill="#FFFFFFFF" Stroke="#FF000000"/> 
<Rectangle Margin="73,178,56,111" Fill="#FFFFFFFF" Stroke="#FF000000"/>

 

    5、使用菜单“对象”——“合并”——“相减”命令,此时,我们就已经得到一个半圆,如图所示:

合并后得到的半圆

 

    6、为得到的半圆设置相应的填充等属性即可以得到我们想要的半圆了。此时的半圆已经不是一个形状(Shape),而是一个由两个形状合并之后的路径(Path)了。

 

    事实上,我们可以通过“合并”的方法得到很多我们需要的“形状”,在Expression Blend的帮助中详细介绍了合并的方法和具体的含义——

不同类型合并的含义

 

 

     

 

posted @ 2009-02-06 11:56 蜡人张 阅读(...) 评论(...) 编辑 收藏