一步一步學Silverlight 2系列（28）：圖片處理

概述

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中對於圖片的處理，在後面我們還將利用這些知識做一個綜合實例——實現圖片的倒影效果。

本文出自 “TerryLee技術專欄” 博客，請務必保留此出處[url]http://terrylee.blog.51cto.com/342737/67280[/url]

本文出自 51CTO.COM技術博客