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

最终我们实现的效果图将会如下所示：
^6idB vb'a0ITPUB个人空间'`u'COO*J\
先准备一张图片，这里我使用了一张液晶显示器的图片:)
/O8zN1m,zK)D v
J h0ITPUB个人空间Sxlr(o;eA
ITPUB个人空间 {E/C1U+W1a%]

Step 2：创建图片

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

<CanvasBackground="#000000">
/@"GeR0t&H
b3w0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间m.@(b$?nxjl
</Image>ITPUB个人空间Z"GpkO
</Canvas>

运行后应该看起来如下所示：ITPUB个人空间 S#}le {;v
ITPUB个人空间&Hfk [1O'o/I]

Step 3：创建倒影

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

<CanvasBackground="#000000">
	J1F$u?5b0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间1@_d
Q%S*F2OH
</Image>ITPUB个人空间:t.J	`m.Y!O
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png"Opacity="0.4">ITPUB个人空间0cxJ
r)}
<Image.RenderTransform>ITPUB个人空间F+V`.@9@5A4W
<TransformGroup>
8q+Ci7`)`TZ2y*fA0<ScaleTransform.ScaleY="-1"></ScaleTransform>
}Nb6g#Q2TC-Kz8Y0<TranslateTransform.Y="320"></TranslateTransform>
t3{[;dIL0X kib0</TransformGroup>ITPUB个人空间e	z^&b@V2m
</Image.RenderTransform>
+{h|+j	l?0</Image>ITPUB个人空间}`K~y+G"f
</Canvas>

运行后看起来如下所示：

Step 4：半透明遮罩

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

<CanvasBackground="#000000">ITPUB个人空间4se
r0?6gr6SY
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间%c9t7BBQ
</Image>
C]5hd(o2FLG0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间4~}#@HPp9x$G
<Image.RenderTransform>ITPUB个人空间/BNPz,{6qp
<TransformGroup>
]8P"e4n(M%k
w&U+x0<ScaleTransform.ScaleY="-1"></ScaleTransform>ITPUB个人空间D!G,? Se%Rt8h8` bd
<TranslateTransform.Y="320"></TranslateTransform>ITPUB个人空间4}"g$xO0VO	T
</TransformGroup>ITPUB个人空间r[.c&^	t/~
</Image.RenderTransform>
#FSe!??'L0<Image.OpacityMask>ITPUB个人空间zka(BL-a}
X#^i2`w
<LinearGradientBrushStartPoint="0.5,1"EndPoint="0.5,0.0">
1Ku!j;~"CH
^0y,H-t a0<GradientStopOffset="0.0"Color="#00000000" />ITPUB个人空间
\@	[9x@3Y
<GradientStopOffset="1.0"Color="#FF000000" />
5F/J"W*F6?_]l!i0</LinearGradientBrush>
"Yite5`j0</Image.OpacityMask>
z
o[wR0</Image>
,m~&d0u}4@$M\
Cy0</Canvas>

运行后效果如下，倒影图片显示出了淡出效果：
Jyc lsism9d0
%k4jo_5l?0

Step 5：进一步扭曲倒影

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

<CanvasBackground="#000000">ITPUB个人空间(A4q[#H$d
W
`
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
A6A:B
f!g(R$FT-Y
f*T0</Image>ITPUB个人空间I4B3R*iz	w,S:O,R
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
s7{G)d^0<Image.RenderTransform>
"l3k
Z+L#L|}+sb0<TransformGroup>
$`3H J3_|.a
?0<ScaleTransform.ScaleY="-0.75"></ScaleTransform>ITPUB个人空间JOYqY0ZH
<TranslateTransform.Y="280"></TranslateTransform>ITPUB个人空间-f)u7_	g"A/dG'uT
</TransformGroup>
}fXFW.o
hka/[0</Image.RenderTransform>ITPUB个人空间5ltr@r~aq
<Image.OpacityMask>
Lif@cD c0<LinearGradientBrushStartPoint="0.5,0.0"EndPoint="0.5,1.0">
4Hsl Q;Ae9r0<GradientStopOffset="0.0"Color="#00000000" />
a?.lIs)U%D0<GradientStopOffset="1.0"Color="#FF000000" />ITPUB个人空间j
R~
dg]{fL`
</LinearGradientBrush>
VWqVE7Pu0</Image.OpacityMask>
:S[/kZ6v8wo0</Image>
`#}rj
ZWO%@%d(y0</Canvas>

运行后效果如下：

Step 6：斜化倒影

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

<CanvasBackground="#000000">ITPUB个人空间
i0jz/^	iA;O
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间wkX(WB_x
</Image>
7W_2d.F
}"e0P0<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">ITPUB个人空间_MA{$lZey	?A;x9CM
<Image.RenderTransform>
	acEwW(_0<TransformGroup>ITPUB个人空间 eS8lJ
]A;JO
<ScaleTransform.ScaleY="-0.75"></ScaleTransform>ITPUB个人空间e.ikyq+o8O
<SkewTransform.AngleX="-15"></SkewTransform>
z
en\D:up&t
m
f0<TranslateTransform.Y="280"X="-30"></TranslateTransform>
1V-i3p,n$?)iy0</TransformGroup>
"x'c0Wtn!J0</Image.RenderTransform>
P"h2c9d
~0p,P
n0<Image.OpacityMask>ITPUB个人空间1b a]+hg,ao)DpP$A
<LinearGradientBrushStartPoint="0.5,0.0"EndPoint="0.5,1.0">ITPUB个人空间@
L$D2Cjob
<GradientStopOffset="0.0"Color="#00000000" />
RoL ] rj2c0<GradientStopOffset="1.0"Color="#FF000000" />
:JQ.u9kPGLt
z
g0</LinearGradientBrush>
yr_cp0</Image.OpacityMask>
x9OG]r+l0</Image>ITPUB个人空间F9y,Oa1z9q$CZ
</Canvas>

运行后效果应该如下所示：
;HSsC`}5H6s0
i8y1@D+Y6r'r#e0

Step 7：进一步淡化倒影

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

<CanvasBackground="#000000">ITPUB个人空间/w3x1IpD+h:bm3Z
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png">
 [?q3]^D*R
P4}s0</Image>ITPUB个人空间	K(H7R*d5Ai
<ImageCanvas.Top="20"Canvas.Left="182"Source="a.png"Opacity="0.4">ITPUB个人空间0w1C\;W+hG
<Image.RenderTransform>
!A+k[8JK0RL?z0B0<TransformGroup>ITPUB个人空间}o4b
YA({Y
<ScaleTransform.ScaleY="-0.75"></ScaleTransform>ITPUB个人空间2N.gQu$\F|*x(@
<SkewTransform.AngleX="-15"></SkewTransform>
J2RA	s6HIv4o)}`Y!UX0<TranslateTransform.Y="280"X="-30"></TranslateTransform>ITPUB个人空间G;`}8u!HO
z
</TransformGroup>ITPUB个人空间:Iy'gZ#qC4g,w+v
</Image.RenderTransform>ITPUB个人空间*HM*ME9}~4k
<Image.OpacityMask>ITPUB个人空间h:x
o6E/x5GU
<LinearGradientBrushStartPoint="0.5,0.0"EndPoint="0.5,1.0">
8m{Bk6Gl0<GradientStopOffset="0.0"Color="#00000000" />
&];Jg6U.O7h#k_2SZK0<GradientStopOffset="1.0"Color="#FF000000" />ITPUB个人空间:sQ
z6?snX}
</LinearGradientBrush>ITPUB个人空间#u4SRqZf+y
</Image.OpacityMask>
R:yj?|[0</Image>
:uR+{,l6N7A0</Canvas>

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

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

结束语

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