一步一步学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：素材准备

最终我们实现的效果图将会如下所示：ITPUB个人空间Bk4I_Mb
ITPUB个人空间.G
\ R!A!\[!Jp+F
先准备一张图片，这里我使用了一张液晶显示器的图片:)ITPUB个人空间c`B%PP](x2i;o

:Q*s#H\P \;l0ITPUB个人空间/s@Av!h$lS1y4x-b4A

Step 2：创建图片

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

<CanvasBackground="#000000">ITPUB个人空间3_	_Lm&J
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间,z(`7s\ks-C
</Image>
[j+YQV0</Canvas>

运行后应该看起来如下所示：
3V!{Y+P)i?(k7_9uaF0
6oCZ.^5saU&I0

Step 3：创建倒影

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

<CanvasBackground="#000000">
9{0U2@oAi0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
#Bl^THCkb0</Image>
,@
R3z!iA]N;y7C0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png"Opacity="0.4">ITPUB个人空间N@.[OnN
<Image.RenderTransform>ITPUB个人空间{\4P#C[1M{c2A
<TransformGroup>ITPUB个人空间.k3Ohi^~p
<ScaleTransform.ScaleY="-1"></ScaleTransform>ITPUB个人空间;p
_.DA7P%{.}C2z
<TranslateTransform.Y="320"></TranslateTransform>
%U!E1YCj8M%teR"Y0</TransformGroup>ITPUB个人空间#ndAGX#Pb }9A8z
</Image.RenderTransform>ITPUB个人空间Dne0QJ-Rx
</Image>
Nl)I`/Kk0</Canvas>

运行后看起来如下所示：

Step 4：半透明遮罩

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

<CanvasBackground="#000000">ITPUB个人空间0? I1K_s5y['QJi H
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
+H\1l6CRxt0</Image>ITPUB个人空间
`3PCa2ciA;e
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
F2]!_6dh0<Image.RenderTransform>
9mrnWPI_0<TransformGroup>
hT H*|U#Ns0<ScaleTransform.ScaleY="-1"></ScaleTransform>ITPUB个人空间:{:v8Yt'MB6A2h
<TranslateTransform.Y="320"></TranslateTransform>
T A5^6hD4l
n.q1w0</TransformGroup>
UT`#I-\6s}0</Image.RenderTransform>

@fZ6Yc0<Image.OpacityMask>
/Qf#FB&k{;C0<LinearGradientBrushStartPoint="0.5,1"EndPoint="0.5,0.0">
%~g
J
Q4W'yA*{0<GradientStopOffset="0.0"Color="#00000000" />ITPUB个人空间(\3RPXsz|A
<GradientStopOffset="1.0"Color="#FF000000" />ITPUB个人空间 }4ejK$S6u)P
</LinearGradientBrush>ITPUB个人空间*m
GBh(X"F:QV
</Image.OpacityMask>ITPUB个人空间.Fx;n6hA'pr3Pk#n
</Image>ITPUB个人空间'H&C%x(C8Yu
</Canvas>

运行后效果如下，倒影图片显示出了淡出效果：
zg$o9PIV0
9fZUQ cKP0

Step 5：进一步扭曲倒影

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

<CanvasBackground="#000000">ITPUB个人空间~o"ku2u4k]8{/A
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
3|$uY.ox8Dj0</Image>
1tn+Q{q!A*D;F1L0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
QAJsz0<Image.RenderTransform>
*\yOOq`0Omb0<TransformGroup>ITPUB个人空间5A
az
j.K|
<ScaleTransform.ScaleY="-0.75"></ScaleTransform>
"X;?'dl!b"^:Y;S0HmH9N0<TranslateTransform.Y="280"></TranslateTransform>ITPUB个人空间D	v!R0jS3[
</TransformGroup>
6yD%K
N)`
A#J5z0</Image.RenderTransform>
|o	jlY(c+N@0<Image.OpacityMask>ITPUB个人空间:}5W/s6Dq;VVN
<LinearGradientBrushStartPoint="0.5,0.0"EndPoint="0.5,1.0">
1[1]*]Z
PE0<GradientStopOffset="0.0"Color="#00000000" />
HvP1b*Q	mv,c0<GradientStopOffset="1.0"Color="#FF000000" />ITPUB个人空间h1D;w5^6`/o@4Y
</LinearGradientBrush>ITPUB个人空间0zVCW
Me4{'qh
</Image.OpacityMask>ITPUB个人空间kItLT.Jy#lJE
</Image>
	gZ*r7B5]0^h0</Canvas>

运行后效果如下：

Step 6：斜化倒影

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

<CanvasBackground="#000000">
3ca,MJ^W0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间3B Hy*G0ML2_.N0a\
_
</Image>
VF-q
@k'p0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间va!|v9n[.|
<Image.RenderTransform>
b#AAG)~f0R.~0<TransformGroup>ITPUB个人空间g!LG	mYh
<ScaleTransform.ScaleY="-0.75"></ScaleTransform>
Wn J;K.c"w|._0<SkewTransform.AngleX="-15"></SkewTransform>
c2Ta,wN-Y,D[H4J0<TranslateTransform.Y="280"X="-30"></TranslateTransform>ITPUB个人空间
];E2}9@oN@$N\
</TransformGroup>
vi,Y/b{skCy0</Image.RenderTransform>
"U`F u:r5k~0<Image.OpacityMask>ITPUB个人空间7UE[is}	|
<LinearGradientBrushStartPoint="0.5,0.0"EndPoint="0.5,1.0">
-^LO1MHA/OZ0<GradientStopOffset="0.0"Color="#00000000" />ITPUB个人空间nw#h,O'q8P]Q]t
<GradientStopOffset="1.0"Color="#FF000000" />ITPUB个人空间4sA2oA"H.Y]i
</LinearGradientBrush>ITPUB个人空间 jym'oe-[
</Image.OpacityMask>ITPUB个人空间-lP-gs0O'o
hx
</Image>
2Sf]Mbr0</Canvas>

运行后效果应该如下所示：
z_
dx6_0~0
5n$R!T%F c0

Step 7：进一步淡化倒影

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

<CanvasBackground="#000000">ITPUB个人空间|5}3c5`
U$x\[P
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间nP]oXTRfE
</Image>
-B.PT u,`)\&d%y)C0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png"Opacity="0.4">ITPUB个人空间9Gk1a(O]
k2\8~
<Image.RenderTransform>ITPUB个人空间;s|3z T
sT-J\#])i
z
<TransformGroup>
.FFe9tSPO8W&t0<ScaleTransform.ScaleY="-0.75"></ScaleTransform>
qaPFD.LvB
J0<SkewTransform.AngleX="-15"></SkewTransform>
Q1FZEI+CZdO*^0<TranslateTransform.Y="280"X="-30"></TranslateTransform>
dn\9y8hk0</TransformGroup>ITPUB个人空间'e8F/o,\8s7Ie
</Image.RenderTransform>
1?x;Ma}1B0<Image.OpacityMask>
)c,d6w4U8i#j*k2O0<LinearGradientBrushStartPoint="0.5,0.0"EndPoint="0.5,1.0">
}6c+ZhP0<GradientStopOffset="0.0"Color="#00000000" />
A+W&Dt|2y#W0<GradientStopOffset="1.0"Color="#FF000000" />ITPUB个人空间0|
@({[.X%\g
</LinearGradientBrush>
 M*G$Q8I!L2Z@d0</Image.OpacityMask>
J-@&I
M|0</Image>
*U3M-MTgp0</Canvas>

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

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

结束语

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