概述

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)畫(huà)、圖形圖像等幾個(gè)方面帶您快速進(jìn)入Silverlight 2開(kāi)發(fā)。

本文將介紹在Silverlight 2中進(jìn)行圖片的處理，包括圖片的拉伸、裁剪、半透明遮罩等內(nèi)容。

創(chuàng)建圖片

創(chuàng)建圖片，我們可以直接使用Image控件或者在上一篇講過(guò)的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>

運(yùn)行后如下所示：

圖片拉伸

當(dāng)我們創(chuàng)建了一個(gè)圖片的時(shí)候，如果不指定它的寬度和高度，它將會(huì)使用默認(rèn)的規(guī)格來(lái)顯示；如果指定了高和寬，圖片將顯示在指定高和寬的矩形區(qū)域內(nèi)。可以通過(guò)蘇醒Stretch來(lái)指定圖片如何填充在該區(qū)域內(nèi)，即圖片拉伸。Stretch屬性具有四個(gè)可選值：

None：不對(duì)圖片進(jìn)行拉伸以便填充規(guī)定的尺寸。

Uniform：按比例進(jìn)行拉伸，直到有一邊滿足規(guī)定的尺寸區(qū)域?yàn)橹梗溆嗖糠植粫?huì)被填充，按最小尺寸填充。

UniformToFill：按比例進(jìn)行拉伸，直到完全填充規(guī)定的尺寸區(qū)域?yàn)橹梗鲈搮^(qū)域的將會(huì)被裁剪，按最大尺寸填充。

Fill：不按比例拉伸，完全填充規(guī)定的尺寸區(qū)域，將會(huì)破壞圖像的比例。

Stretch默認(rèn)的屬性是Uniform，為了更直觀的看到這個(gè)四個(gè)值的區(qū)別，下面看一個(gè)例子，我們使用一個(gè)規(guī)格尺寸為160*90圖片，中間帶一個(gè)小的正方形：

在頁(yè)面上放置四個(gè)Border控件，大小為220*220，并在其中各放置一個(gè)Image，圖片的大小也定義為220*220，設(shè)置四個(gè)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>

運(yùn)行后可以很明顯的看到這個(gè)四個(gè)值的區(qū)別，如下圖所示：

裁剪圖片

有時(shí)候我們只需要顯示出圖片的一部分，可以使用Clip屬性對(duì)圖片進(jìn)行裁剪，在Clip屬性中我們可以設(shè)置任意的幾何圖形，注意是Geometry而非前面講過(guò)的Shape，關(guān)于Geometry后面會(huì)專門講到。如下面的例子，裁剪出一個(gè)橢圓的區(qū)域：

<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>

運(yùn)行后效果如下所示：

半透明遮罩

使用圖片的OpacityMask屬性，可以解釋為通過(guò)用OpacityMask屬性指定的畫(huà)刷的alpha通道值來(lái)遮掩圖片的alpha通道值，可以使用的畫(huà)刷有LinearGradientBrush, RadialGradientBrush和ImageBrush，而對(duì)于SolidColorBrush則可以直接通過(guò)Opacity屬性實(shí)現(xiàn)。如下面的例子，我們對(duì)圖片做一些漸變的效果：

<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>

運(yùn)行后效果如下：

結(jié)束語(yǔ)

本文介紹了Silverlight中對(duì)于圖片的處理，在后面我們還將利用這些知識(shí)做一個(gè)綜合實(shí)例——實(shí)現(xiàn)圖片的倒影效果。

NET技術(shù)：一步一步學(xué)Silverlight ：圖片處理，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。