【李会军】一步一步学Silverlight 2系列（26）：基本图形

概述

Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发。

本文将简单介绍Silverlight中的基本图形，主要有Line、Ellipse、Rectangle、Path、Polygon、Polyline六种，它们之间的继承关系如下所示：ITPUB个人空间j{6q7E S jM
ITPUB个人空间
?9G6wx0@w @
ITPUB个人空间K~3x t'N.kU

在Silverlight中，所有的图形几乎都具有如下几个重要的属性：

Stroke：对边框线填充

StrokeThickness：边框线的宽度

Fill：对图形进行填充

Line

Line顾名思义，在两点之间画出一条直线，需要指定起始点（X1、Y1）和终结点（X2、Y2）的坐标。如下面的例子：

<CanvasBackground="#CDFCAE">ITPUB个人空间,N!@m7B3o!N
<LineCanvas.Top="20"Canvas.Left="20"ITPUB个人空间"h/?4I(d"fqj	k
X1="20"Y1="20"X2="400"Y2="20"ITPUB个人空间$L:jEh+q"}@
Stroke="#FF9900"StrokeThickness="4">ITPUB个人空间?/[#m"L[CRW6K
</Line>
&|3F&a@!gOa0ITPUB个人空间0c:_g
~8m
<LineCanvas.Top="40"Canvas.Left="20"ITPUB个人空间v0Lq)Y"X{o
X1="20"Y1="40"X2="200"Y2="180"
PWSP
uA#V0b0Stroke="#0099FF"StrokeThickness="5">
8l5Ke${9Y~0Q.Y0</Line>
)Q/l!E`O0](W#u1e0ITPUB个人空间y+Cv2Gz/AIL
|8u
<LineCanvas.Top="20"Canvas.Left="240"ITPUB个人空间2d/v1P'n,r-lh&X
X1="220"Y1="20"X2="220"Y2="200"ITPUB个人空间TH1W'O3W'|A
StrokeThickness="6">ITPUB个人空间'U1Y-E"RGHVG
<Line.Stroke>ITPUB个人空间pn*u0X
`C
<LinearGradientBrushStartPoint="0,0">
i2K7N[O)c*^']0<GradientStopColor="#FFFFFF"Offset="0.0" />
 A#[pQ6bHly}0<GradientStopColor="#307801"Offset="1.0" />
;t
t/~3H)qrau0</LinearGradientBrush>
fVmE^0</Line.Stroke>
/fbp	h*`\3X0</Line>
+`r#?%Yy5`&M0</Canvas>

运行后如下所示，分别画出三条直线：

Ellipse

Ellipse即椭圆形，如果设置长和高相等，画出来将是圆形，主要的属性还是前面说的那三个。如下面的示例：

<CanvasBackground="#CDFCAE">ITPUB个人空间AG:c]QUA
<EllipseCanvas.Top="20"Canvas.Left="40"
p~0rhY{	r0Width="160"Height="80"Fill="#FF9900"
'?q tB#W3T
m#@0Stroke="Black"StrokeThickness="3">
}D){%]^3Lb0</Ellipse>ITPUB个人空间8k0xuMQ3x@m2?E	u&b
ITPUB个人空间QQj!g"l
<EllipseCanvas.Top="20"Canvas.Left="260"ITPUB个人空间Mi.E7mhN	o
Width="180"Height="100">ITPUB个人空间f$Cl4G){'h0Mi
<Ellipse.Fill>
~/`6z1q3Q0<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"ITPUB个人空间#r;|9[H!X^L
hN$oE2V
RadiusX="0.5"RadiusY="0.5">
S(r"AV9W!VU;_0<GradientStopColor="#0099FF"Offset="0" />
u&H}L!H	e	~0<GradientStopColor="#FF0000"Offset="0.25" />ITPUB个人空间6?igv4OQ
<GradientStopColor="#FCF903"Offset="0.75" />
	C!Q
c4gEL#b+b*H&~0<GradientStopColor="#3E9B01"Offset="1" />
+@-|0a-G@V0</RadialGradientBrush>
6uW.]6Gp)b"V0</Ellipse.Fill>

Abo&d6Ng.?0</Ellipse>
(UuC-Z5v#y|/E"o0ITPUB个人空间qwf-F
Oyc&O5x
<EllipseCanvas.Top="120"Canvas.Left="160"ITPUB个人空间F`q6G6f}7bq
Width="100"Height="100"Fill="#FF9900"ITPUB个人空间e/\	LSj
Stroke="#000000"StrokeThickness="2">ITPUB个人空间3U'OD"N)wb\HYQ
</Ellipse>ITPUB个人空间so^0n7c7t
</Canvas>

运行后如下所示，显示三个椭圆形：

Rectangle

Rectangle看名称就知道是矩形，设置长度和高度相等则为正方形，其主要的属性还是开始我们提到的那三个，同时还可以通过RadiusX和RadiusY来设置它的圆角效果，看下面的例子：

<CanvasBackground="#CDFCAE">ITPUB个人空间.KiF1\/J
<RectangleCanvas.Top="20"Canvas.Left="40"
.j
h{"pNx&@0Width="160"Height="80"Fill="#FF9900"
,f	iV*h];e0Stroke="Black"StrokeThickness="3">
5v0fcuv
?*s0</Rectangle>ITPUB个人空间
F3Q/CL.JK


_*^vl	C;c0<RectangleCanvas.Top="20"Canvas.Left="260"
%~7lsy"qG|`.c0Width="180"Height="100">
%H"{6y	n9a'Z-R0tA0<Rectangle.Fill>
V)w	p(SM/{9vHEY0<RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"
2R`Xe"`/w^
\0RadiusX="0.5"RadiusY="0.5">
(KxdUv]
Y0<GradientStopColor="#0099FF"Offset="0" />
E!\v2R$V0<GradientStopColor="#FF0000"Offset="0.25" />
.b B?p(G
YP7E8]0<GradientStopColor="#FCF903"Offset="0.75" />ITPUB个人空间*m-}1F&Z-S4EV0Wq
<GradientStopColor="#3E9B01"Offset="1" />ITPUB个人空间,S|NZ/CYUd
</RadialGradientBrush>ITPUB个人空间BfWn9Qf
</Rectangle.Fill>ITPUB个人空间PgBG.?wG
</Rectangle>
;k{w;g9r)v#Y}w0
j1bx N
TzRE}0<RectangleCanvas.Top="120"Canvas.Left="120"
q$N+Wk!L}/h2_4i9_0Width="100"Height="100"
9o0RBjULLw0Stroke="#000000"StrokeThickness="2"RadiusX="15"RadiusY="15">
%N1l zIV u6`*F
{0<Rectangle.Fill>
#I9KA#ho%_(m#mVG
v0<LinearGradientBrushStartPoint="0,1">
	q
E:IG|.g0<GradientStopColor="#FFFFFF"Offset="0.0" />ITPUB个人空间,bs
?
Ra:[i
<GradientStopColor="#FF9900"Offset="1.0" />ITPUB个人空间5J&m%v0isW
O&n
</LinearGradientBrush>ITPUB个人空间3B;~/zWF.dwTr
</Rectangle.Fill>ITPUB个人空间T5u5i;_.K.h
</Rectangle>ITPUB个人空间9q0gA%o.@;u5a
</Canvas>

运行后如下所示，其中有两个加上了渐变效果：

Path

相比较前面三个简单的图形来说，Path相对来说比较复杂，它用来画出一系列的相连的圆弧或者线条，可以称之为“轨迹”，使用它可以画出任意复杂的形状，主要通过Data属性来展现。一个简单的Path声明示例如下：

<CanvasBackground="#CDFCAE">ITPUB个人空间{fqS Y#T;D$dt
<PathStroke="Orange"StrokeThickness="3"ITPUB个人空间t7s[X,t"Z vnZ
Data="M 10,40 L 300,40 V 100 H 240 S 300,240 400,175">ITPUB个人空间]Nw D|`
}
</Path>ITPUB个人空间E k`i2I
^O
</Canvas>

运行后如下所示：

这里对Data做一下简单的解释，Silverlight提供了一种称之为“迷你语言”的属性句法，来描述如何画出轨迹形状，包括M（移动命令，起 始点）、L（直线，结束点）、H（水平线）、V（垂直线）、C（三次贝塞尔曲线）、Q（两次贝塞尔曲线）、A（椭圆弧曲线）、Z（结束命令）等。更为详细 的使用大家可以参考SDK。

Polygon

Polygon用来画多边形，需要用Points属性来指定几个特定的点，至于画几边形，要看你定义几个点了（要看救生员啥时救他—宋丹丹语录），它会自动闭合。

<CanvasBackground="#CDFCAE">
1y4M!\y(R
I
F;F&c6qRc0w0<PolygonCanvas.Left="50"Canvas.Top="50"
5M	`;NgA3NLa-F0Points="50,20 300,20 300,160 200,160"
	OApF[0Stroke="Green"StrokeThickness="3"Fill="Orange">

SLB(Y5Ra0</Polygon>
4Ge]9\#~0</Canvas>

每一个点之间用空格分开，运行后如下所示：ITPUB个人空间3Ef)w+`'\f7p

YA t'K2CS-@N0

Polyline

Polyline用来画多边线，与上面的Polygon不同的地方是它不一定要是闭合的，同样用Points属性来指定几个特定的点，我们定义一个跟上面的示例一样的Polyline：

<CanvasBackground="#CDFCAE">ITPUB个人空间M[(wJ4WH^
<PolylineCanvas.Left="50"Canvas.Top="50"
)Df)E'|/Z}O0Points="50,20 300,20 300,160 200,160"ITPUB个人空间-c9I%[1t
CA+OM"K
Stroke="Green"StrokeThickness="3"Fill="Orange">ITPUB个人空间1Gu5}!GY5eOJ5p
</Polyline>ITPUB个人空间JiG&y| Y fSM0c
</Canvas>

运行后可以看到，有一条边未闭合：

结束语

本文内容比较简单，介绍了Silverlight中的一些基本的图形。