Silverlight 圖形：影像處理

建映像

　　為了呈現映像，您可以使用 Image 或 ImageBrush 對象。下面的樣本示範如何建立映像。

　　XAML

<Image　Source="myPicture.png"　/>

　　VB

Dim　myImage　As　Image　=　New　Image
myImage.Source　=　New　BitmapImage(New　Uri("myPicture.jpg",　UriKind.RelativeOrAbsolute))
LayoutRoot.Children.Add(myImage)

　　在本例中，Source 屬性用於指定要顯示的映像的位置。可以通過指定絕對
URL（例如，http://contoso.com/myPicture.jpg）來設定 Source，也可以指定相對於應用程式的 XAP 檔案的
URL。對於前一樣本，您需要將 XAP 檔案放置於 myPicture.png 所在的檔案夾。

　　您使用 ImageBrush 來使用映像繪製採用畫筆的地區。例如，ImageBrush 可用於 Canvas 或 InkPresenter 的
Background 屬性的值。

　　說明：

　　Silverlight 並不支援所有映像格式。

　　展開映像

　　如果您沒有設定 Image 的 Width 或 Height 值（如上例所示），則它將使用 Source 指定的映像的自然尺寸顯示。設定 Height
和 Width 將建立一個包含矩形地區，映像將顯示在該地區中。您可以通過使用 Stretch 屬性指定映像如何填充此包含地區。Stretch 屬性接受
Stretch 枚舉定義的下列值：

　　None：映像不展開以適合輸出尺寸。

　　Uniform：映像進行縮放，以適合輸出尺寸。但保留該內容的縱橫比。這是預設值。

　　UniformToFill：對映像進行縮放，從而可以完全填充輸出地區，但保持其原始縱橫比。

　　Fill：視頻進行縮放，以適合輸出尺寸。由於內容的高度和寬度是獨立縮放的，因此映像的原始縱橫比可能不會保留。也就是說，為了完全填充輸出地區，映像可能會失真。

 

 

下面的插圖顯示了不同的 Stretch 設定。

　　展開設定

　　下面的樣本顯示一個 Image，它填充 300 x 300 像素的一個輸出地區，但保留其原始縱橫比，因為 Stretch 屬性設定為
UniformToFill。

　　XAML

<Canvas　Width="300"　Height="300"　Background="Gray">　
　　
　<Image　Source="myImage.jpg"　Stretch="UniformToFill"　Width="300"　Height="300"　/>　
　
</Canvas>　

　　說明：

　　在只設定一個約束屬性時（例如 Height），其他屬性（本例中為 Width）將基於自然映像的縱橫比自動計算。由於此行為，設定 Stretch
屬性並不更改該行為，除非它設定為 None。

　　裁切映像

　　可以通過使用 Clip 屬性裁切掉映像輸出的某個地區來裁切映像。您將 Clip 屬性設定為
Geometry，這意味著可以從映像中裁切掉各種幾何形狀（例如，橢圓、直線或複雜路徑）。有關建立幾何圖形的更多資訊，請參見幾何圖形。

　　下面的樣本示範如何將 EllipseGeometry 用作映像的剪輯地區。在此樣本中，用 Width 200 和 Height 150 定義了一個
Image 對象。一個 RadiusX 值為 100、RadiusY 值為 75、Center 值為 100,75 的 EllipseGeometry
設定為映像的 Clip 屬性。只有位於橢圓地區內部的映像部分才會顯示。

　　XAML

<Grid　x:Name="LayoutRoot"　Background="White">　
　<Image　Source="Water_lilies.jpg"　
　　Width="200"　Height="150">　
　　<Image.Clip>　
　　　<EllipseGeometry　RadiusX="100"　RadiusY="75"　Center="100,75"/>　
　　</Image.Clip>　
　</Image>　
</Grid>　
　

 

 

顯示此樣本的輸出。

　　用於剪輯映像的 EllipseGeometry

　　說明：

　　除 Image 外的多種對象均可被剪輯。

　　說明：

　　建立裁切效果的另一種方法是通過使用漸層來應用 OpacityMask。在此情況下，因為您使用的是
Opacity，所以可以在裁切中建立模糊邊緣。

　　應用 OpacityMask

　　您可以將 OpacityMask 應用於某一映像，以便建立多種與不透明度相關的照片蒙板技術，例如虛光照效果，如所示。

　　OpacityMask 建立的虛光照效果的樣本

　　使用映像繪製 (ImageBrush)

　　您使用 ImageBrush 來使用映像繪製採用畫筆的地區。例如，ImageBrush 可用於 Canvas 或 InkPresenter 的
Background 屬性的值。有關畫筆的更多資訊，請參見畫筆。

　　下面的 XAML 樣本顯示如何將 Foreground 屬性設定為 ImageBrush，其映像將用作 TextBlock 呈現文本的填充。

　　XAML

<!--　TextBlock　with　an　image　brush　applied　to　the　text.　-->　
<TextBlock　FontFamily="Verdana"　FontSize="72"　
　FontStyle="Italic"　FontWeight="Bold">　
　　SHRUBBERY　
　<TextBlock.Foreground>　
　　<ImageBrush　ImageSource="forest.jpg"/>　
　</TextBlock.Foreground>　
</TextBlock>　

 

 

顯示此 XAML 樣本的結果。

　　用於填充文本的 ImageBrush

 

 

　　縮放和平移映像

 

　　您可以使用稱作 Deep Zoom 的技術來實現對大型映像或高解析度映像的集合的縮放和平移。

 

　　使用 Deep Zoom 的一個例子是 Hard Rock Memorabilia 網站。您可以使用滑鼠滾輪進行縮放並通過拖動四處移動映像。

 

　　通常，載入大型映像並非使用者的最佳體驗，因為需要等待映像載入。Deep Zoom
通過以漸進方式載入較高解析度的映像，可協助解決這一難題。這為使用者帶來"煥然一新"的體驗。此外，使用者可以利用 Deep Zoom
的功能更改其映像的視圖，並且使用帶給使用者圍繞映像平滑"移動"印象的彈簧動畫。下面是使用 Deep Zoom 的樣本：

 

　　探究非常大或高解析度映像：有關於此的一個典型樣本就是放大一幅大型地圖的各部分，以便看到不同層級的細節，然後使用滑鼠圍繞地圖圖面行動裝置檢視。隨著使用者行動裝置檢視，將使用動畫增強在視圖上從一個地方移到另一個地方的印象。另一個例子就是探究構成高解析度圖形的專業相片合成。

 

　　三維攝影：拍攝某一房間的照片，連續拍攝將建立構成該房間的 360 度畫面的照片的集合。現在，使用者可以圍繞房間平移，每張照片都與其他照片混合。

 

　　廣告：您可以建立解析度相對較低的映像以表達廣告的整個主題，然後，逐漸增加更高解析度的映像以容納加深使用者印象的效果以及與產品有關的資料。在首次載入嵌入該廣告的頁面時，通過不斷載入更高解析度的映像，廣告將平滑銳利化並吸引讀者的注意。此外，如果使用者的滑鼠指標進入廣告，廣告的不同部分將放大。