none
Essential Silverlight翻译连载---第四章 续1 RRS feed

  • 常规讨论

  • 例4-6创建了跟上例相同的三角形,但这一次倒角看上去非常完美,如图4-5所示。当使用<Polygon>创建三角形时,不能再使用混合颜色,这里使用了一个附加的可视效果:设置Fill属性。

    例4-6多边形类型的三角形,XAML文件(polygon.xaml)

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Polygon Points="200,50,350,250,50,250"

               Stroke="Black" StrokeThickness="5" Fill="Orange" />

    </Canvas>





    多边形的一个特例是矩形,在Silverlight中使用<Rectangle>元素来描绘。它不需要提供每个角的坐标(包括左上角和右下角),只是提供了一个特殊的方法:把矩形的长和宽赋给Width和Height属性。在“Positioning Elements“这一章中将介绍给矩形定位的技术,现在暂不管它,先介绍<Rectangle>的另一个功能:圆角。

    圆角实际上是一个椭圆(随后会讨论它)。您可以设置椭圆的半径,如果水平半径和垂直半径相同,可以得到一个圆,这是圆角用得最多的选项。当然,您也可以令它们的半径不同而得到不同的视觉效果。这需要使用RadiusX和RadiusY属性。

    例4-7把椭圆的RadiusX:RadiusY的比率设置为100:1。其效果如图4-6所示:圆角跟矩的两条平行线几乎重叠。

    例4-7 矩形圆角,XAML文件(Rectangle.xaml)

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle Width="200" Height="150"

                 Stroke="Black" StrokeThickness="5" Fill="Orange"

                 RadiusX="100" RadiusY="50" />

    </Canvas>





    (译者注:请尝试把RadiusY属性设为30,这样更能看出它们的效果)

    最后一个图形也是最重要的一个,尤其对于混合设计来说,就是路径,或者说是<Path>元素。它最重要的属性是Data,它包含了定义一个路径的重要信息。说句实话,通常使用工具来创建路径,因为任何形状,无论有多复杂都可以转换为路径。本节将就路径语法办个速成班。

    一条路径由几个绘制指令:移动虚拟铅笔到指定位置,绘制指定形状,结束绘制。每条指令开始于一个大小写敏感的英文字母,它标识指令并在其后跟随几个参数。

    第一部分是所谓的填充规则。需要注意一些特殊的情况:当元素交叉时该如何处理。您可以选择默认值F0和F1:

    F0

    代表EvenOdd填充法则,表示一个点到画布末端之间跟路径有偶数个交点,则表示这个点在路径之外。如果点的个数为奇数,则表示它在路径之内,需要被填充。

    (译者注:原文为Stands for EvenOdd, meaning that points that have an even number of path egments between them and the end of the canvas are considered outside the path; points with an odd number are considered inside and would be filled.虽然知道EvenOdd是怎么回事,但这句实在是看不懂,先乱翻一通吧,哪位厉害的兄弟帮看看这句该怎么翻译)

    F1

    代表NonZero填充法则,表示一个点到画布末端的直线跟路径相交时,当路径指向左边和指向右边的次数一样时,表示点在路径的内部。

    (译者注:原文为Stands for NonZero, meaning that all points where a line between the point and the end of the canvas crosses the path from the left side as often as from the right side are considered inside the path.这一段大家可能不知所云,先放着吧,以后再专门写一篇文章解释这个问题)

    通常,都是使用EvenOdd填充法则,它也是默认值,您根本不需要去设置它。

    第二部分是指令,通常使用M,代表“移动”。它将把虚拟铅笔移动到指定位置而且没有开始绘制。下面的路径将把铅笔放到x 坐标为40,y坐标为30的位置:

    M 40,30

    可以从一个点开始画几种形状。我们再一次从直线开始介绍,它用命令L表示。您只需要提供直线的终点-----起点由当前铅笔的位置来决定。所以下面的路径将在点(40,30)到点(70,80)之间画一条直线。

    M 40,30 L 70,80

    提示:线的特殊情况为水平线(H命令)和垂直线(V命令)。画一条水平线,您只需要提供终点的x坐标;画垂直线,只需要提供终点的y坐标。

    使用直线,可以创建没有曲线的几何形状。而对于曲线来说,则有几种命令。A命令绘制椭圆弧,需要提供一组参数:

    l         椭圆的x和y轴半径

    l         椭圆的旋转角度(单位为度)

    l         角度是(1)否(0)大于180度

    l         圆弧是(1)否(0)顺时针方向绘制

    l         圆弧的终点

    下面命令将创建一个从点(50,50)到(100,50)的圆弧,x和y轴半径分别为75,顺时针方向旋转90°。

    M 50,50 A 50,50 90 0 1 100,50 (译者注:说是半径为75,而这条命令用的半径是50)

    在矢量图形领域中经常使用到的一种曲线是贝塞尔曲线,取名自法国汽车设计者Pierre Bézier(Pierre Bézier是数学家,十九世纪六十年代晚期,Pierre Bézier应用数学方法为雷诺公司的汽车制造业描绘出了贝塞尔曲线)。假设有两个点A和B,贝塞尔定义了几个数学公式来描述这描述经过这些点的曲线。其中最简单的就是线性曲线,无需借助其他工具,通过Silverlight就能简单地绘制它。尽管如此,还是需要很多复杂的变量。一个二次贝塞尔曲线(之所以这样称呼是因为定义了公式值的平方)使用了所谓的控制点去精确控制曲线外观。相关的Silverlight的path命令是Q,表示这个控制点也是它的终点的坐标;记住起点也是由当前铅笔所在位置确定。

    下列标记把铅笔移动到点(125,125),并从它到点(175,175)创建了一个贝塞尔曲线,使用点(110,60)作为控制点:

    M 125,125 Q 110,60 175,75

    一个三次贝塞尔曲线更进了一步,使用了两个控制点。相关的Silverlight的path命令是C。这有个例子:曲线从点(150,125)到(50,100),两个控制点为(125,175)和(20,125)。

    M 150,125 C 125,175 20,125 50,100

    提示:有可能会使用到更高级的贝塞尔曲线:它们根据前一个点进行变化,从而使曲线看上去更平滑。平滑的二次贝尔曲线使用S命令,平滑的三次贝尔曲线使用T命令。它们的语法和Q、C命令一样

    差点忘记最后一个命令:Z,它可以使一个曲线闭合,表示铅笔画一条直线到路径的起点。

    例4-8演示了前面几个path命令的使用。如图4-7所示,按顺时针方向你可以看到一条直线(红色),一段椭圆弧(黄色)在直线右边。一条二次贝塞尔曲线(绿色)在圆弧右边,一条三次贝塞尔曲线(绿色)。贝塞尔曲线的控制点已经被标记成X,这样您就可以看到是哪个点控制着曲线的样式。这些标记也使用了path命令创建(画了两条交叉线)。

    例4-8 使用Path,XAML文件(Path.xaml)

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Path Data="M 20,10 L 40,70"

            Stroke="Red" StrokeThickness="5" />

    <Path Data="M 50,50 A 50,50 90 0 1 100,50"

            Stroke="Yellow" StrokeThickness="5" />

    <Path Data="M 125,75 Q 200,100 175,125"

            Stroke="Green" StrokeThickness="5" />

    <Path Data="M 195,95 L 205,105 M 205,95 L 195,105"

            Stroke="Black" StrokeThickness="2" />

    <Path Data="M 150,125 C 125,175 20,125 50,100"

            Stroke="Blue" StrokeThickness="5" />

    <Path Data="M 120,170 L 130,180 M 130,170 L 120,180"

            Stroke="Black" StrokeThickness="2" />

    <Path Data="M 15,120 L 25,130 M 25,120 L 15,130"

            Stroke="Black" StrokeThickness="2" />

    </Canvas>



           正如本节开头所说的,手动创建一条路径是痛苦的,所以您应该使用绘图软件去做这些事情。但无论如何,您现在可以分析和理解那些由矢量绘图工具所创建的路径了。
    提示:如果之前您使用过SVG,这些path语法将跟它非常接近。大多数矢量格式的路径使用相同的格式,所以语法也相近。

    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月11日 8:22
    版主