一步一步学Silverlight 2系列（31）：图形图像综合实例—实现水中倒影效果

概述

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

本文将综合前面几篇关于图形图像处理的技术，如画刷、半透明遮罩、Transform等，实现一个水中倒影效果的示例。

Step 1：素材准备

最终我们实现的效果图将会如下所示：
:h(ZG2|R`B!p(}(lk m0
7|i5lhZJi0先准备一张图片，这里我使用了一张液晶显示器的图片:)ITPUB个人空间-Ht [(K!Yk4X{f&M
ITPUB个人空间_LT/u;|7X3]M

G*K&`~"ej y*qS8U0

Step 2：创建图片

首先我们创建一个图片，使用Image控件，并进行定位

<CanvasBackground="#000000">ITPUB个人空间4M
y;E
`Q\ a
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间{	vR/V4[
GW,\
</Image>
5H(hK-|Y5hI;w$?
M9u0</Canvas>

运行后应该看起来如下所示：ITPUB个人空间-`F ~7@ C9~\#n

ky} q+|8A V#iD0

Step 3：创建倒影

复制一张图片，使其位置与原始图片一样，然后我们使用ScaleTransform进行创建图片的倒影，这时图片已经翻转到了屏幕的外面，可以通过调节Canvas.Top进行调节，或者使用TranslateTransform：

<CanvasBackground="#000000">ITPUB个人空间L
T:M/iE
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间5Sr]l8A
</Image>ITPUB个人空间
z.plkGN.Ve!n
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png"Opacity="0.4">
`"yj	OTh
a9a0<Image.RenderTransform>
!Cxl;K)DD8[d|0<TransformGroup>ITPUB个人空间&?Hi/q9cq
@
<ScaleTransform.ScaleY="-1"></ScaleTransform>ITPUB个人空间YlA[
eY'{+e!U#v
<TranslateTransform.Y="320"></TranslateTransform>
TjmZ:V5Q/up
O7W[0</TransformGroup>
AU|)NbP(rc+CtV,z0</Image.RenderTransform>
;V"kxGJ%dG4Rw:g0</Image>
k!C
\%bu6|Z4Q\0</Canvas>

运行后看起来如下所示：

Step 4：半透明遮罩

利用我们在图片处理一文介绍过的OpacityMask属性实现半透明遮罩，使其看起来更加像倒影:)

<CanvasBackground="#000000">ITPUB个人空间1i%I:{DPrl+mE,i
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
.^oZ8gg\u(t2Y$x0</Image>
)Rq/RV'~9h/S	[0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
/hz'p	@qTG0<Image.RenderTransform>ITPUB个人空间A2J9PL,H7Ct%P
<TransformGroup>
5JcA&A,[1Fg0<ScaleTransform.ScaleY="-1"></ScaleTransform>ITPUB个人空间 I+Ls^8af\
<TranslateTransform.Y="320"></TranslateTransform>
o1`$|5nn-z1Q(s0</TransformGroup>ITPUB个人空间 F(F1cU+R`*[^^om$e
</Image.RenderTransform>
ps!~1Wh;T2mp0<Image.OpacityMask>ITPUB个人空间I4j
X
aJyG|
<LinearGradientBrushStartPoint="0.5,1"EndPoint="0.5,0.0">
[)Woo;m
A,X7K(P0<GradientStopOffset="0.0"Color="#00000000" />
T	_wn9]7HMDp Z0<GradientStopOffset="1.0"Color="#FF000000" />
mWX+f'G
S%R*z*|0</LinearGradientBrush>
@0Vn1TkI*E0</Image.OpacityMask>ITPUB个人空间;r.N4r#t	C5D7?Bf
</Image>
C(LDXq b3U6^0</Canvas>

运行后效果如下，倒影图片显示出了淡出效果：
E j'V v/I,H4^"ul`0ITPUB个人空间(VFD8EB)d

Step 5：进一步扭曲倒影

我们对倒影图片做进一步的扭曲，用ScaleTransform来实现，使其在Y轴上做一些缩小，从1修改为0.75，达到扭曲的效果，并重新调整位置：

<CanvasBackground="#000000">
/o
[!QF
SjB0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间"o.nC P8eI)JD/U7eLB-H
</Image>
@(td1O7HW0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
ssX.Ld
D;yp0<Image.RenderTransform>
Vqd#}^'~tT%};\%|0<TransformGroup>ITPUB个人空间k5l0k){:N
<ScaleTransform.ScaleY="-0.75"></ScaleTransform>
{t,Q6Ro+O(uD0<TranslateTransform.Y="280"></TranslateTransform>ITPUB个人空间D7lx/LQ7M|z6ad
</TransformGroup>ITPUB个人空间!{7aM/XsRGj2w8Yg
</Image.RenderTransform>
/L*Y(s
cO*j5cy	[0<Image.OpacityMask>ITPUB个人空间,F&eW} c(Dm
<LinearGradientBrushStartPoint="0.5,0.0"EndPoint="0.5,1.0">
Q'Pc:t%ywe0<GradientStopOffset="0.0"Color="#00000000" />ITPUB个人空间O%bpqxi
K;z
<GradientStopOffset="1.0"Color="#FF000000" />
U;v{ v$g~V0</LinearGradientBrush>
7b
i
|}x4F?0</Image.OpacityMask>ITPUB个人空间(KGz](~5L
</Image>
d'_T	vAHf
\0</Canvas>

运行后效果如下：

Step 6：斜化倒影

我们对倒影做进一步的斜化，而不是垂直倒影，使用SkewTransform来实现，并重新调整倒影位置：

<CanvasBackground="#000000">ITPUB个人空间?"diL(p
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间,@om/jV^
</Image>
K/K*?8Vaj&@z*R%Y0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
8[uex-M![s,g)E"Q0<Image.RenderTransform>ITPUB个人空间1p2[m#c{4w
<TransformGroup>
4aVOD9E0mR6f.v0<ScaleTransform.ScaleY="-0.75"></ScaleTransform>ITPUB个人空间R
rk5P)O5Y
gF
<SkewTransform.AngleX="-15"></SkewTransform>
3f"v
s``q0<TranslateTransform.Y="280"X="-30"></TranslateTransform>ITPUB个人空间3R&iv1c5p$np
</TransformGroup>
ZG,o/lrV#JO+Z6N0</Image.RenderTransform>ITPUB个人空间/j*u3FI
mST'V	E'i
<Image.OpacityMask>
r*jkPF5P2G0<LinearGradientBrushStartPoint="0.5,0.0"EndPoint="0.5,1.0">ITPUB个人空间PM6q[7Hh
<GradientStopOffset="0.0"Color="#00000000" />ITPUB个人空间9^\4l*V|$pHo
<GradientStopOffset="1.0"Color="#FF000000" />
lY/xJb@(gl0</LinearGradientBrush>

L;|7^u.F0</Image.OpacityMask>ITPUB个人空间"a+Kl.}
n)lr{
</Image>ITPUB个人空间Z^9Ex9@	Y'x?
h
</Canvas>

运行后效果应该如下所示：
O6B.~2f-?/J Gt0ITPUB个人空间4M!I.r4F i2v$H ],~

Step 7：进一步淡化倒影

为了使倒影更加逼真，我们最后再对倒影做点修饰，进一步淡化倒影，调整倒影的Opacity属性。

<CanvasBackground="#000000">
h	ciP.BFgD*y6qc0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间4K/Kz Fy
</Image>
-y(f2T1B8w\[C0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png"Opacity="0.4">
,ZMI%F.l1WYn
Ad0_V0<Image.RenderTransform>

s	V)K(GuP_0<TransformGroup>
ixb'GyO|z0<ScaleTransform.ScaleY="-0.75"></ScaleTransform>ITPUB个人空间V3mn)U_:y!t5J(@
<SkewTransform.AngleX="-15"></SkewTransform>ITPUB个人空间@$tS9euGp/h1W
<TranslateTransform.Y="280"X="-30"></TranslateTransform>
j5Rl&noM0</TransformGroup>ITPUB个人空间so4Fa(oB
</Image.RenderTransform>
koPmRe0<Image.OpacityMask>ITPUB个人空间9FIMnp
\%JI!h
<LinearGradientBrushStartPoint="0.5,0.0"EndPoint="0.5,1.0">
4oT
vec
H[a0p0<GradientStopOffset="0.0"Color="#00000000" />
N,H6r"~3J	Yf(a0<GradientStopOffset="1.0"Color="#FF000000" />
/]Md8ik
N8TB0</LinearGradientBrush>ITPUB个人空间 s
z
X)eOqYK
</Image.OpacityMask>
x\V#?	p)z%q
Qt0</Image>ITPUB个人空间;[
x[Vv'[0rq
</Canvas>

最后运行后整体效果如下所示：

这样就完成了一个水中倒影的示例，大家可以充分发挥自己的创意，做出更炫更酷的效果。

结束语

本文综合运用前面几篇关于图形图像处理的技术，包括画刷、半透明遮罩、以及几种基本的Transform做了一个简单的水中倒影示例，你可以从这里下载本文示例代码。