概述
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">
rPh&N"HR
V0<RectangleCanvas.Left="20"Canvas.Top="80"
[G4K`9P5`o0Width="240"Height="136"RadiusX="15"RadiusY="15">ITPUB个人空间Z3z2MI:]%S;w4Ho#G
<Rectangle.Fill>
} Ns\|i%Kp0<ImageBrushImageSource="a1.png"></ImageBrush>
L3zFMV5b0</Rectangle.Fill>
_c7[cxr#` i0</Rectangle>
a7Dn0ei0
!m e1t-B3}0e
i5xX;E0<ImageSource="b1.png"Canvas.Left="320"Canvas.Top="80"></Image>
k,c5tp3Om)u0</Canvas>
运行后如下所示:
9`&U*J?
b#{'li
p0
ITPUB个人空间0KG3^%wSclOt
图片拉伸
当我们创建了一个图片的时候,如果不指定它的宽度和高度,它将会使用默认的规格来显示;如果指定了高和宽,图片将显示在指定高和宽的矩形区域内。可以通过苏醒Stretch来指定图片如何填充在该区域内,即图片拉伸。Stretch属性具有四个可选值:
None:不对图片进行拉伸以便填充规定的尺寸。
Uniform:按比例进行拉伸,直到有一边满足规定的尺寸区域为止,其余部分不会被填充,按最小尺寸填充。
UniformToFill:按比例进行拉伸,直到完全填充规定的尺寸区域为止,超出该区域的将会被裁剪,按最大尺寸填充。
Fill:不按比例拉伸,完全填充规定的尺寸区域,将会破坏图像的比例。
Stretch默认的属性是Uniform,为了更直观的看到这个四个值的区别,下面看一个例子,我们使用一个规格尺寸为160*90图片,中间带一个小的正方形:ITPUB个人空间a
J
v7n"RK

YU|0e^ze0
在页面上放置四个Border控件,大小为220*220,并在其中各放置一个Image,图片的大小也定义为220*220,设置四个Image的Stretch属性分别为None、Uniform、UniformToFill、Fill,如下所示:
<CanvasBackground="#CDFCAE">
)n8ivz"v6h\7tb
_0<BorderBorderBrush="Black"BorderThickness="3"
e XttI)Y/{0Width="220"Height="220"Canvas.Left="40"Canvas.Top="50">ITPUB个人空间0eO5t#q7L;A
<ImageSource="a2.png"Stretch="None"Width="220"Height="220"></Image>
&dI@S)T A@
j6l0</Border>ITPUB个人空间:S kp ej,X
ITPUB个人空间%T&jf(h/xi!ov-IK
<BorderBorderBrush="Black"BorderThickness="3"ITPUB个人空间#M ?C-XWzP`jd
X
Width="220"Height="220"Canvas.Left="330"Canvas.Top="50">ITPUB个人空间
gy*x:R!v
<ImageSource="a2.png"Stretch="Uniform"Width="220"Height="220"></Image>
#O2f2MY7MA0</Border>
"qJ:{RR0
W4t%WJi#I0<BorderBorderBrush="Black"BorderThickness="3"
y4C To)v| o"V)\Hc(?0Width="220"Height="220"Canvas.Left="330"Canvas.Top="330">
1z(?6Fbo(j6W^0<ImageSource="a2.png"Stretch="UniformToFill"Width="220"Height="220"></Image>ITPUB个人空间.a1\t6wR5Pr
</Border>
NWQ
n(e)]$p0ITPUB个人空间
C%pr D} F
<BorderBorderBrush="Black"BorderThickness="3"ITPUB个人空间 pQ4c7yT/Nl$K$LA-T
Width="220"Height="220"Canvas.Left="40"Canvas.Top="330">
)GpDMU#h0<ImageSource="a2.png"Stretch="Fill"Width="220"Height="220"></Image>
)c%bD,t;|#Fm^z0</Border>ITPUB个人空间 sZ`
q2V5Yp
</Canvas>
运行后可以很明显的看到这个四个值的区别,如下图所示:

*z+W)eFJ0裁剪图片
有时候我们只需要显示出图片的一部分,可以使用Clip属性对图片进行裁剪,在Clip属性中我们可以设置任意的几何图形,注意是Geometry而非前面讲过的Shape,关于Geometry后面会专门讲到。如下面的例子,裁剪出一个椭圆的区域:
<CanvasBackground="#CDFCAE">
7h(h~r
`$T
q0<ImageSource="a1.png"Canvas.Left="40"Canvas.Top="80"></Image>ITPUB个人空间0ra'db*g;IQtV
<ImageSource="a1.png"Canvas.Left="320"Canvas.Top="80">ITPUB个人空间D)pb&E+{g+m
<Image.Clip>ITPUB个人空间Q-t"g8@.l9Dr
<EllipseGeometryCenter="120,68"RadiusX="100"RadiusY="60">
rD~$j;l:eg9|0</EllipseGeometry>
h-{v3V5b
Qm%I/K.r0</Image.Clip>ITPUB个人空间u&bdo\*H
</Image>ITPUB个人空间:kM
bIW
</Canvas>
运行后效果如下所示:
`7gF-cW(a)x*Bi9x0
xD{8u
B!G*x@0
|!A9`,dg @0
半透明遮罩
使用图片的OpacityMask属性,可以解释为通过用OpacityMask属性指定的画刷的alpha通道值来遮掩图片的alpha通道值,
可以使用的画刷有LinearGradientBrush,
RadialGradientBrush和ImageBrush,而对于SolidColorBrush则可以直接通过Opacity属性实现。如下面的
例子,我们对图片做一些渐变的效果:
<CanvasBackground="#CDFCAE">
JMM
ZG.\0<ImageSource="a1.png"Canvas.Left="160"Canvas.Top="80"Opacity="0.7">ITPUB个人空间1rJtijG)T%F
<Image.OpacityMask>
B0XX"BYmf9kLt0<LinearGradientBrushStartPoint="0,0"EndPoint="1,0">
/kzr X#bnN.E0<GradientStopOffset="0.0"Color="#00000000" />ITPUB个人空间G
])g7B:_
}ut
<GradientStopOffset="1.0"Color="#FF000000" />
!]|kF };^y"L3E(_v0</LinearGradientBrush>
1lR+V,p/N I0</Image.OpacityMask>
`(aa+O2Dl0</Image>
9Ec/@&C(ku_$R0</Canvas>
运行后效果如下:ITPUB个人空间r7r*[ x1KO
ITPUB个人空间 l~ k^s7~H
结束语
本文介绍了Silverlight中对于图片的处理,在后面我们还将利用这些知识做一个综合实例——实现图片的倒影效果。
ITPUB个人空间M i0MkW7g kGC2nR