|
|
概述
Silverlight 2 Beta 1版本發(fā)布了，無(wú)論從Runtime還是Tools都給我們帶來(lái)了很多的驚喜，如支持框架語(yǔ)言Visual Basic, Visual C#, IronRuby, IronPython，對(duì)JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學(xué)Silverlight 2系列》文章將從Silverlight 2基礎(chǔ)知識(shí)、數(shù)據(jù)與通信、自定義控件、動(dòng)畫、圖形圖像等幾個(gè)方面帶您快速進(jìn)入Silverlight 2開發(fā)。
本文為使用Transform實(shí)現(xiàn)更炫的效果第二部分，在Silverlight中提供了四種基本變換：旋轉(zhuǎn)變換（RotateTransform ）、縮放變換（ScaleTransform）、傾斜變換（SkewTransform）、移動(dòng)變換（TranslateTransform）和兩種復(fù)雜的變換：變換組（TransformGroup）、矩陣變換（MatrixTransform ），這些變換可以運(yùn)用到任何控件或者圖形圖像。
矩陣變換（MatrixTransform ）
矩陣變換MatrixTransform是所有變換中功能最強(qiáng)大最靈活也是最復(fù)雜的一種變換，如果前面講解的幾種基本變化不能滿足我們?cè)趯?shí)際開發(fā)中的需求，可以使用矩陣變換進(jìn)行自定義，它允許我們直接對(duì)變換矩陣進(jìn)行操作。
在Silverlight中，變換是提供一個(gè)3*3的矩陣，我們通過(guò)修改矩陣中成員的值來(lái)實(shí)現(xiàn)變換，矩陣的定義如下所示：
如修改OffsetX，元素將會(huì)在X軸上進(jìn)行移動(dòng)；修改OffsetY，元素將在Y軸上移動(dòng)；修改M22為2，元素的高度將會(huì)拉伸2倍，通過(guò)該矩陣，我們能實(shí)現(xiàn)前面提到的幾種基本變換的所有功能。更詳細(xì)的解釋大家可以參考SDK。如下面的例子，我們使用矩陣變換，仍然能實(shí)現(xiàn)前面示例中的變換效果：
<Canvas Background="#CDFCAE"> <Image Source="a1.png" Canvas.Left="120" Canvas.Top="50" Opacity="0.3"> </Image> <Image Source="a1.png" Canvas.Left="120" Canvas.Top="50" Opacity="0.5"> <Image.RenderTransform> <MatrixTransform> <MatrixTransform.Matrix> <Matrix OffsetX="0" OffsetY="0" M12="0.2"></Matrix> </MatrixTransform.Matrix> </MatrixTransform> </Image.RenderTransform> </Image> <Image Source="a1.png" Canvas.Left="120" Canvas.Top="50"> <Image.RenderTransform> <MatrixTransform> <MatrixTransform.Matrix> <Matrix OffsetX="0" OffsetY="0" M12="0.4"></Matrix> </MatrixTransform.Matrix> </MatrixTransform> </Image.RenderTransform> </Image></Canvas>
運(yùn)行后效果如下：
實(shí)現(xiàn)動(dòng)畫變換
Transform與Silverlight中的Storyboard結(jié)合，可以很容易的實(shí)現(xiàn)出動(dòng)畫變換的效果，如下面的例子，當(dāng)鼠標(biāo)放在上去的時(shí)候，圖片開始旋轉(zhuǎn)；鼠標(biāo)離開時(shí)停止旋轉(zhuǎn)：
<Canvas Background="#CDFCAE"> <Canvas.Resources> <Storyboard x:Name="myStoryboard"> <DoubleAnimation Storyboard.TargetName="myTransform" Storyboard.TargetProperty="Angle" From="0" To="180" Duration="0:0:5" RepeatBehavior="Forever" /> </Storyboard> </Canvas.Resources> <Image x:Name="imgTarget" Source="a1.png" Canvas.Left="180" Canvas.Top="80" MouseEnter="imgTarget_MouseEnter" MouseLeave="imgTarget_MouseLeave"> <Image.RenderTransform> <RotateTransform x:Name="myTransform" Angle="15" CenterX="120" CenterY="68" /> </Image.RenderTransform> </Image></Canvas>
在代碼中控制Storyboard：
private void imgTarget_MouseEnter(object sender, MouseEventArgs e){ myStoryboard.Begin();}private void imgTarget_MouseLeave(object sender, MouseEventArgs e){ myStoryboard.Stop();}
運(yùn)行后效果如下：
當(dāng)鼠標(biāo)放上后將開始旋轉(zhuǎn)：
用代碼控制變換
這個(gè)話題其實(shí)沒(méi)什么好講的，在后臺(tái)代碼中對(duì)Transform進(jìn)行控制，如下面的例子，每次點(diǎn)擊圖片時(shí)，都讓RotateTransform的角度增加15度：
<Canvas Background="#CDFCAE"> <Image Source="a1.png" Canvas.Left="180" Canvas.Top="80" Opacity="0.3"> </Image> <Image x:Name="imgTarget" Source="a1.png" Canvas.Left="180" Canvas.Top="80" MouseLeftButtonDown="imgTarget_MouseLeftButtonDown"> <Image.RenderTransform> <RotateTransform x:Name="myTransform" Angle="0" CenterX="120" CenterY="68" /> </Image.RenderTransform> </Image></Canvas>
private void imgTarget_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){ myTransform.Angle = myTransform.Angle + 15;}
當(dāng)單擊之后將會(huì)旋轉(zhuǎn)：
結(jié)束語(yǔ)
本文為使用Transform實(shí)現(xiàn)更炫的效果第二部分，介紹了矩陣變換以及如何實(shí)現(xiàn)動(dòng)畫變換、在代碼中控制變換，接下來(lái)我將會(huì)運(yùn)用前面幾篇關(guān)于圖形圖像處理的知識(shí)寫一個(gè)綜合實(shí)例。
NET技術(shù)：一步一步學(xué)Silverlight ：使用Transform實(shí)現(xiàn)更炫的效果（下），轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
