|
|
概述
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格式的圖片。
<Canvas Background="#CDFCAE"> <Rectangle Canvas.Left="20" Canvas.Top="80" Width="240" Height="136" RadiusX="15" RadiusY="15"> <Rectangle.Fill> <ImageBrush ImageSource="a1.png"></ImageBrush> </Rectangle.Fill> </Rectangle> <Image Source="b1.png" Canvas.Left="320" Canvas.Top="80"></Image></Canvas>
運行后如下所示：
圖片拉伸
當我們創建了一個圖片的時候，如果不指定它的寬度和高度，它將會使用默認的規格來顯示；如果指定了高和寬，圖片將顯示在指定高和寬的矩形區域內。可以通過蘇醒Stretch來指定圖片如何填充在該區域內，即圖片拉伸。Stretch屬性具有四個可選值：
None：不對圖片進行拉伸以便填充規定的尺寸。
Uniform：按比例進行拉伸，直到有一邊滿足規定的尺寸區域為止，其余部分不會被填充，按最小尺寸填充。
UniformToFill：按比例進行拉伸，直到完全填充規定的尺寸區域為止，超出該區域的將會被裁剪，按最大尺寸填充。
Fill：不按比例拉伸，完全填充規定的尺寸區域，將會破壞圖像的比例。
Stretch默認的屬性是Uniform，為了更直觀的看到這個四個值的區別，下面看一個例子，我們使用一個規格尺寸為160*90圖片，中間帶一個小的正方形：
在頁面上放置四個Border控件，大小為220*220，并在其中各放置一個Image，圖片的大小也定義為220*220，設置四個Image的Stretch屬性分別為None、Uniform、UniformToFill、Fill，如下所示：
<Canvas Background="#CDFCAE"> <Border BorderBrush="Black" BorderThickness="3" Width="220" Height="220" Canvas.Left="40" Canvas.Top="50"> <Image Source="a2.png" Stretch="None" Width="220" Height="220"></Image> </Border> <Border BorderBrush="Black" BorderThickness="3" Width="220" Height="220" Canvas.Left="330" Canvas.Top="50"> <Image Source="a2.png" Stretch="Uniform" Width="220" Height="220"></Image> </Border> <Border BorderBrush="Black" BorderThickness="3" Width="220" Height="220" Canvas.Left="330" Canvas.Top="330"> <Image Source="a2.png" Stretch="UniformToFill" Width="220" Height="220"></Image> </Border> <Border BorderBrush="Black" BorderThickness="3" Width="220" Height="220" Canvas.Left="40" Canvas.Top="330"> <Image Source="a2.png" Stretch="Fill" Width="220" Height="220"></Image> </Border></Canvas>
裁剪圖片
有時候我們只需要顯示出圖片的一部分，可以使用Clip屬性對圖片進行裁剪，在Clip屬性中我們可以設置任意的幾何圖形，注意是Geometry而非前面講過的Shape，關于Geometry后面會專門講到。如下面的例子，裁剪出一個橢圓的區域：
<Canvas Background="#CDFCAE"> <Image Source="a1.png" Canvas.Left="40" Canvas.Top="80"></Image> <Image Source="a1.png" Canvas.Left="320" Canvas.Top="80"> <Image.Clip> <EllipseGeometry Center="120,68" RadiusX="100" RadiusY="60"> </EllipseGeometry> </Image.Clip> </Image></Canvas>
運行后效果如下所示：
半透明遮罩
使用圖片的OpacityMask屬性，可以解釋為通過用OpacityMask屬性指定的畫刷的alpha通道值來遮掩圖片的alpha通道值，可以使用的畫刷有LinearGradientBrush, RadialGradientBrush和ImageBrush，而對于SolidColorBrush則可以直接通過Opacity屬性實現。如下面的例子，我們對圖片做一些漸變的效果：
<Canvas Background="#CDFCAE"> <Image Source="a1.png" Canvas.Left="160" Canvas.Top="80" Opacity="0.7"> <Image.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Offset="0.0" Color="#00000000" /> <GradientStop Offset="1.0" Color="#FF000000" /> </LinearGradientBrush> </Image.OpacityMask> </Image></Canvas>
結束語
本文介紹了Silverlight中對于圖片的處理，在后面我們還將利用這些知識做一個綜合實例——實現圖片的倒影效果。
NET技術：一步一步學Silverlight ：圖片處理，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
