.NEt专家博客！

【李会军】一步一步学Silverlight 2系列（28）：图片处理

上一篇 / 下一篇 2008-04-11 21:30:40 / 个人分类：经典文章

概述

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

本文将介绍在Silverlight 2中进行图片的处理，包括图片的拉伸、裁剪、半透明遮罩等内容。

创建图片

创建图片，我们可以直接使用Image控件或者在上一篇讲过的ImageBrush，使用ImageBrush可以填充图形或者控件的前景色、背景色等，只需要指定ImageSource属性。注意，在Silverlight 2 Beta 1中，目前似乎只支持.png格式的图片。

<CanvasBackground="#CDFCAE">
P7xqE
\8^J
H0<RectangleCanvas.Left="20"Canvas.Top="80"
%HU*XT:b1U;aGG)f0Width="240"Height="136"RadiusX="15"RadiusY="15">ITPUB个人空间
{_(k*gM5I$pi5d:A
<Rectangle.Fill>
+M~(}~Q9qlv0<ImageBrushImageSource="a1.png"></ImageBrush>ITPUB个人空间U`Pz*vi4{%]M~
</Rectangle.Fill>
)eH#j`	QX+u0</Rectangle>
"j$YmY4A#c&V\cw0ITPUB个人空间
Fx?~~sV*o'o
<ImageSource="b1.png"Canvas.Left="320"Canvas.Top="80"></Image>ITPUB个人空间|gx/M0u
</Canvas>

运行后如下所示：
&N&H7k^X'M%gW0
B@`8e"yVs!q'\0

图片拉伸

当我们创建了一个图片的时候，如果不指定它的宽度和高度，它将会使用默认的规格来显示；如果指定了高和宽，图片将显示在指定高和宽的矩形区域内。可以通过苏醒Stretch来指定图片如何填充在该区域内，即图片拉伸。Stretch属性具有四个可选值：

None：不对图片进行拉伸以便填充规定的尺寸。

Uniform：按比例进行拉伸，直到有一边满足规定的尺寸区域为止，其余部分不会被填充，按最小尺寸填充。

UniformToFill：按比例进行拉伸，直到完全填充规定的尺寸区域为止，超出该区域的将会被裁剪，按最大尺寸填充。

Fill：不按比例拉伸，完全填充规定的尺寸区域，将会破坏图像的比例。

Stretch默认的属性是Uniform，为了更直观的看到这个四个值的区别，下面看一个例子，我们使用一个规格尺寸为160*90图片，中间带一个小的正方形：ITPUB个人空间9H_a/l zA"@#J-v

&w+Fi2} Mbr0

在页面上放置四个Border控件，大小为220*220，并在其中各放置一个Image，图片的大小也定义为220*220，设置四个Image的Stretch属性分别为None、Uniform、UniformToFill、Fill，如下所示：

<CanvasBackground="#CDFCAE">ITPUB个人空间U0?[us u3` N
<BorderBorderBrush="Black"BorderThickness="3"ITPUB个人空间	KW2YJ5FK
{
Width="220"Height="220"Canvas.Left="40"Canvas.Top="50">ITPUB个人空间'|"L"}{$p]
<ImageSource="a2.png"Stretch="None"Width="220"Height="220"></Image>ITPUB个人空间Ca
X)kM2cp4m&^
</Border>
 r*g	Z'?j;g0
]e%j
O6?$_
` Rv{0<BorderBorderBrush="Black"BorderThickness="3"
+beo!\jA0Width="220"Height="220"Canvas.Left="330"Canvas.Top="50">ITPUB个人空间mL2S0Do(s$B
X:k4T
<ImageSource="a2.png"Stretch="Uniform"Width="220"Height="220"></Image>ITPUB个人空间GK-I1~#t$N9]
</Border>ITPUB个人空间w2t3@s~c#u&f
ITPUB个人空间%Mu`Ol,Q?Ew7z
<BorderBorderBrush="Black"BorderThickness="3"
!}!|;xZ!~JK0Width="220"Height="220"Canvas.Left="330"Canvas.Top="330">
i,A,xg+g&VN'@:a0<ImageSource="a2.png"Stretch="UniformToFill"Width="220"Height="220"></Image>ITPUB个人空间p
~EUZ
</Border>ITPUB个人空间+GBbuBv8djxeu7h

2aY)D'\.D0<BorderBorderBrush="Black"BorderThickness="3"ITPUB个人空间9Pq4X6eeB
Width="220"Height="220"Canvas.Left="40"Canvas.Top="330">
F(An}C)t@5F,|0<ImageSource="a2.png"Stretch="Fill"Width="220"Height="220"></Image>ITPUB个人空间e)S.H0r+Y9?'A\0x
</Border>ITPUB个人空间&e	LY"c4cl
</Canvas>

运行后可以很明显的看到这个四个值的区别，如下图所示：

裁剪图片

有时候我们只需要显示出图片的一部分，可以使用Clip属性对图片进行裁剪，在Clip属性中我们可以设置任意的几何图形，注意是Geometry而非前面讲过的Shape，关于Geometry后面会专门讲到。如下面的例子，裁剪出一个椭圆的区域：

<CanvasBackground="#CDFCAE">ITPUB个人空间*H#es(I K}l!{&U
<ImageSource="a1.png"Canvas.Left="40"Canvas.Top="80"></Image>
-}rq"t$NZ
f$V(}!g0<ImageSource="a1.png"Canvas.Left="320"Canvas.Top="80">ITPUB个人空间r5k-Ns+\9O3e{
<Image.Clip>ITPUB个人空间'K7lL*?aa+y%}8B
<EllipseGeometryCenter="120,68"RadiusX="100"RadiusY="60">
;m g,sBD|Cl6?*eM0</EllipseGeometry>
u Kd)O7s&u`0</Image.Clip>
]t{q.A0Q0</Image>ITPUB个人空间k?
X)L^"V
</Canvas>

运行后效果如下所示：ITPUB个人空间;g0P!Is9~
ITPUB个人空间ysy[D~c'D
ITPUB个人空间Tab!k+i LL1r-Z

半透明遮罩

使用图片的OpacityMask属性，可以解释为通过用OpacityMask属性指定的画刷的alpha通道值来遮掩图片的alpha通道值，可以使用的画刷有LinearGradientBrush, RadialGradientBrush和ImageBrush，而对于SolidColorBrush则可以直接通过Opacity属性实现。如下面的例子，我们对图片做一些渐变的效果：

<CanvasBackground="#CDFCAE">ITPUB个人空间 o+M-s1O%^ Y^3j4RW3X
<ImageSource="a1.png"Canvas.Left="160"Canvas.Top="80"Opacity="0.7">ITPUB个人空间A7r9v5j%rB!O\M
<Image.OpacityMask>
-I6jxK!\9iL!pw
}Q,Z0<LinearGradientBrushStartPoint="0,0"EndPoint="1,0">
'Zf
MFg&H0<GradientStopOffset="0.0"Color="#00000000" />ITPUB个人空间nALb7_K0L t.O
<GradientStopOffset="1.0"Color="#FF000000" />ITPUB个人空间[c]e(eR(iBve(o
</LinearGradientBrush>

RKpA8{,@+u?b0</Image.OpacityMask>ITPUB个人空间-[UxY6yy
</Image>
_gk9?5L8a$v9j0</Canvas>