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,0,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,0,0"> <Line.Stroke> <LinearGradientBrush > <GradientStop Color="Blue" /> <GradientStop Color="White" Offset="1" /> </LinearGradientBrush> </Line.Stroke> </Line>

运行结果：

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