Silverlight开发历程—（绘制矢量图之Line）

形状绘图

形状（shape）在Silverlight是一个2D绘图类，它位于System.Windows.Shapes这个命名空间内。我们可以把Shape理解为所有Silverlight形状元素的一个集合，包括矩形（Rectangle）、椭圆（Ellispe）、线条（Line）、多段线（PolyLine）和多边形(Polyon).

一、线条元素

线条（Line）是Shape类中的一个最基本的绘图元素，它可以把任意两点能过直线连接起来，如下：

<Line  X1="50" Y1="50" X2="150"  Y2="150" stroke="Black" strokeThickness="3"></Line>

结果：

上面代码演示了如何使用线条（Line），X1、Y1两值确定了线条的起始点，X2、Y2确定了线条的终点。

下面利用线条绘制一个组合图形，绘制一 条折线，每一条线的终点是第二条线的开始点，代码如下：

        <!--第一条线-->
        <Line  X1="50" Y1="50" X2="150"  Y2="150" stroke="Black" strokeThickness="3"></Line>

        <!--第二条线-->
        <Line  X1="150" Y1="150" X2="500"  Y2="50" stroke="Black" strokeThickness="3"></Line>

结果如下：

如图所示，利用两条线组合绘制了一条折线。

Line线条本身还支持渐变的填充，下面例子演示为线条的颜色填充为渐变的。代码：

<!--水平直线填充-->
        <Line X1="10" Y1="50" X2="300" Y2="50" strokeThickness="10" Margin="50,0">
            <Line.stroke>
                <LinearGradientBrush >
                    <GradientStop Color="Gold" />
                    <GradientStop  Color="White" Offset="1" />
                </LinearGradientBrush>
            </Line.stroke>
        </Line>
        <!--垂直直线填充-->
        <Line  strokeThickness="10"  X1="350" Y1="50" X2="350" Y2="200" Margin="50,0">
            <Line.stroke>
                <LinearGradientBrush >
                    <GradientStop Color="Blue" />
                    <GradientStop  Color="White" Offset="1" />
                </LinearGradientBrush>
            </Line.stroke>
        </Line>

运行结果：

stroke、strokeThickness是大多Shape元素的公共属性值，用来定义元素的边框的颜色和宽度值。