Deep Zoom程序設計

     到目前為止，你已經(jīng)見識了Deep Zoom Composer工具，也見到了Deep Zoom 多圖像的瀏覽器應用程序。不過你可能還需要知道怎樣設計這樣的程序。

因此，在這一節(jié)中，你將能夠在Silverlight中開發(fā)Deep Zoom程序，可以用Deep Zoom Composer工具來創(chuàng)建圖像瓷片，而且你也能夠將它們集成到你自己的Silverlight應用程序中，下面的過程將顯示MultiScaleImage控件來展示這個過程。

開發(fā)Deep Zoom程序

1.使用Deep Zoom Composer工具新建一個命名為 SbSCh5_3的工程。

2.添加兩個圖片到視圖中。

3.單擊“導出（Export）”選項卡，選擇“Empty Project+Source”模板。

4.在導出過程完成后，單擊“查看工程目錄（View Project Folder）”，接著將打開Windows資源管理器，顯示這個工程目錄中的詳細內(nèi)容。

5.雙擊“DeepZoomProject.sln”文件，在Visual Web Developer Express 中打開項目。由于Deep Zoom Composer工具是以舊的（Visual Studio 2008）資源代碼格式作為輸出目標，所以Visual Web Developer 會顯示一個對話框詢問你是否需要轉換這個項目，依次單擊每一個對話框的完成按鈕。

6. 定位到“解決方案瀏覽器”，選擇并打開項目的MainPage.xaml文件。在XAML視圖中的Grid元素下添加一個MultiScaleImage控件：

<Grid x:Name="LayoutRoot" Background="White">

<MultiScaleImage Width="400" Height="400"

Source="GeneratedImages/dzc_output.xml">

</MultiScaleImage>

</Grid>

7. 這個控件的Source屬性會得到一個警告的標記，你并不需要擔心，出現(xiàn)這個警告是因為這個XAML是Silverlight項目的一部分，你的Silverlight程序有可能是在運行時才能得到這個路徑，而你現(xiàn)在是在設計時查看的，它引用你存在于項目中資源，于是Source屬性所引用的路徑就不能解析到了。

8.按F5鍵運行這個程序。你會看到Silverlight呈現(xiàn)了這些圖像，不過你還不能和他交互。這是下一步要做的事。

關閉瀏覽器，確信Visual Web Developer沒有在調(diào)試狀態(tài)下。這是你能查看XAML視圖，并且通過以下的一些步驟會圖像能交互。

和圖像交互

1.由于剛才見到的Source屬性的警告標記，Visual Web Developer 不允許你拖動控件到設計器中。刪除MultiScaleImage標簽的Source屬性。設置MultiScaleImage控件的x:Name屬性的值為“msi”，如下所示：

<Grid x:Name="LayoutRoot" Background="White">

<MultiScaleImage Width="400" Height="400"

x:Name="msi"></MultiScaleImage>

</Grid>

2.將兩個StackPanel控件拖放到XAML視圖中，像下面那樣編輯代碼：

<Grid x:Name="LayoutRoot" Background="White">

<MultiScaleImage Width="400" Height="400"

x:Name="msi"></MultiScaleImage>

<StackPanel><StackPanel></StackPanel></StackPanel>

</Grid>

3.在StackPanel控件里添加Orientation參數(shù)，設置第一個StackPanel的Orientation為Vertical，第二個StackPanel的Orientation為Horizontal：

<Grid x:Name="LayoutRoot" Background="White">

<MultiScaleImage Width="400" Height="400"

x:Name="msi"></MultiScaleImage>

<StackPanel Orientation="Vertical">

<StackPanel Orientation="Horizontal"></StackPanel>

</StackPanel>

</Grid>

4.將MultiScaleImage控件作為第一個StackPanel控件的孩子：

<Grid x:Name="LayoutRoot" Background="White">

<StackPanel Orientation="Vertical">

<MultiScaleImage Width="400" Height="400"

x:Name="msi"></MultiScaleImage>

<StackPanel Orientation="Horizontal"></StackPanel>

</StackPanel>

</Grid>

5.在水平StackPanel加入四個按鈕控件。命名分別為：btnLeft, btnRight, btnUp,

和 btnDown。設置他們的Content屬性值依次為：Left, Right, Up,和Down。

<Grid x:Name="LayoutRoot" Background="White">

<StackPanel Orientation="Vertical">

<MultiScaleImage Width="400" Height="400"

x:Name="msi"></MultiScaleImage>

<StackPanel Orientation="Horizontal">

<Button x:Name="btnLeft" Content="Left"></Button>

<Button x:Name="btnRight" Content="Right"></Button>

<Button x:Name="btnUp" Content="Up"></Button>

<Button x:Name="btnDown" Content="Down"></Button>

</StackPanel>

</StackPanel>

</Grid>

6.現(xiàn)在切換到代碼視圖并打開MainPage.xaml.cs 文件，你首先需要添加代碼來設置MultiCScaleImage控件的Source屬性，那么他可以在運行時呈現(xiàn)。（還記得嗎，你從XAML視圖中移除了Source屬性來避免產(chǎn)生錯誤，所以你需要在后置代碼中來加上來）在C#中，這是很容易的事情，我們只需要創(chuàng)建一個Uri對象并且標明這個XML的位置即可。現(xiàn)在你能使用Uri對象來初始化一個新的DeepZoomImageTileSource實例。設置MultiScaleImage控件的Source屬性為這個新的DeepZoomImageTileSource對象。是不是聽起來更簡單呢？事實上，你能在MainPage類的構造器中做，如下所示：

Uri uri = new Uri("GeneratedImages/dzc_output.xml", UriKind.RelativeOrAbsolute);

msi.Source = new DeepZoomImageTileSource(uri);

7.您還可以添加Click事件處理程序或其它任何事件處理程序中的代碼，而不是在 XAML 中指定他們。 這個例子鍵入 btnUp.Click +=，你就會看到一個提示詢問您是否要創(chuàng)建默認事件處理程序。 按 Tab 鍵來完成，聲明，然后同樣的方式創(chuàng)建其它的事件處理程序。 這是一個很大的快捷方式 ！事件聲明應如下所示：

btnUp.Click += new RoutedEventHandler(btnUp_Click);

8.新的事件處理方法看起來就像下面那樣：

voidbtnUp_Click(object sender, RoutedEventArgs e)

{

throw new NotImplementedException();

}

提示：您了解 MultiScaleImage 控件的工作方式是非常重要的。 你指定您目前正在查看設計的一部分，ViewPortOrigin在控件的頂部左側告訴你能查看哪部分的圖像。當您第一次加載圖像時，將 ViewPortOrigin 設置為 0，0。 換而言，左上控件的角落也是圖像的左上角。 若要操作視圖您只需更改 ViewPortOrigin 點。 請注意，原點的值之間0 和 1，0 是頂部或左側的每個軸和 1 是底部或右側的的軸其中，軸是寬度或圖片的高度。 因此，要你的圖像中移動縮放后的區(qū)域，您需要更改 ViewPointOrigin 坐標的 Y 值。

9. 現(xiàn)在，您可以添加一些代碼的事件處理程序。 將此代碼放到了 btnUp_Click
處理程序：

voidbtnUp_Click(object sender, RoutedEventArgs e)

{

Point o = msi.ViewportOrigin;

o.Y += 0.1;

msi.ViewportOrigin = o;

}

10. 作為一個的練習，你現(xiàn)在添加其他三個按鈕的 Click 事件。從左移動右，操作點的 X 屬性。

11. 現(xiàn)在請返回并添加名為 btnIn 和 btnOut 的兩個新的按鈕。 您將使用這些放大的圖像。

12. 為btnIn按鈕的Click事件添加處理程序，將你的btnUp的Click事件在MainPage的構造函數(shù)中指定它。

13.添加一個類級別的變量-在類聲明的下面，而不是在MainPage（）方法中-定義zoom變量：

double zoom = 1.0;

14. VWDE會創(chuàng)建一個btnIn_Click 方法為了縮放到場景中，你乘以大于1的zoom變量。接著調(diào)用ZoomAboutLogicalPoint方法，將這個新的zoom變量傳遞給它并且設置一個縮放中心點。在下面的例子中使用了以原點作為縮放中心。

voidbtnIn_Click(object sender, RoutedEventArgs e)

{

zoom *= 1.3;

msi.ZoomAboutLogicalPoint(zoom,

msi.ViewportOrigin.X, msi.ViewportOrigin.Y);

}

15.現(xiàn)在你能運行你的應用程序。點擊“In”按鈕你會縮放圖像。在這個例子中你可以嘗試用同樣的方式放大圖像。

提示：當你使用Deep Zoom Composer工具時，如果你選擇導出為“Deep Zoom Classic+Source”模板時，你會得到一個包括所以代碼的Visual Studio解決方案。它提供全體驗的Deep Zoom實驗，包括鼠標和鼠標滾輪事件是你能夠在圖像上進行鼠標操作。

 

Silverlight照片合成（Photosynth）

照片合成（Photosynth）是使您可以從不同的角度獲取一些相同圖片并將它們合成同一個場景中的三維模擬技術。試想你站在一個房間里。你拍一張照片的了的門，然后向左轉一點并拍了另一張照片。第二張照片中，可能會有門一部分。照片合成技術可以檢測的重疊和縫合成一個完整圖像。

最終結果將提供一個模擬站在房間的體驗。 用戶環(huán)繞這個場景， 照片合成技術計算出要呈現(xiàn)的最佳圖片，并轉換這些圖片，盡可能模擬出他們站在房間里的效果！

下圖是創(chuàng)建的具有在拍的照片的照片合成項目的一個示例一小聯(lián)盟游戲，攝影師（我）站在基線附近。現(xiàn)場由多個圖像組成 — — 注意在哪里光和顏色級別是不同。如果你在場景中移動，圖像的高亮會變化。當你單擊圖像的中心，你能有效地移動場景并參觀它。如果使用更多的圖片，項目中可以看得更寬大。

你也能像在Deep Zoom 那樣縮放圖像。這個圖像是通過http://www.photosynth.net來處理的，不過你能添加一個基于Silverlight的Viewer控件到你自己的應用程序中。

創(chuàng)建照片合成（Photosynth）

開始之前，你需要同一個場景中的一組圖片。如果你沒有，可以通過數(shù)字攝像機捕捉一些。最容易的方式是：站在同一個點，旋轉180度來捕捉有重疊的一組圖片。

提示：圖片如何重疊。兩個圖片中，在椅子的前面，地板上面的窗體輪廓線上有一點兒不同。而照片合成技術就可以使用這些特征來決定攝像機的視點。然而，如果沒有一個Windows Live ID，可以在http://www.live.com.申請一個。http://www.photosynth.net需要這個ID來登錄創(chuàng)建和上傳你的圖片。

安裝PhotosynthCreation工具

在你登陸到Photosynth后，你會看到主頁，它包括一個Photosynths數(shù)字（所謂的“synths”短名字）標記，在屏幕的頂端你會看到一個“創(chuàng)建（Create）”鏈接。

安裝PhotosynthCreation

1.單擊“創(chuàng)建”鏈接，它會定位到http://photosynth.net/create.aspx.如果你還沒有安裝Photosynth創(chuàng)建工具，你在屏幕中間會看到一個Photosynth按鈕。

2.單擊“Install Photosynth”按鈕，不久你會看到Photosynth文件下載，單擊“運行”按鈕下載并安裝Photosynth工具。

3.這個工具會下載并安裝。注意到這并不是一個由Silverlight實現(xiàn)的Photosynth查看器。這是一個使用認證Photosynths的Windows應用程序。你最終的目的不是要應用程序查看你的圖像—這是Silverlight做的事。

4.接下來安裝向導會指導你安裝創(chuàng)建工具。

5.當你做了這些事情后，瀏覽http://photosynth.net/create.aspx站點。這次，你會在屏幕的頂端看到一個“創(chuàng)建一個合成”的按鈕

使用合成創(chuàng)建器（Synth Creator）

現(xiàn)在你已經(jīng)安裝了創(chuàng)建器，你可以單擊http://photosynth.net/create.aspx 上的“創(chuàng)建”按鈕來創(chuàng)建一個新的合成器（synth）項目。這一部分你講通過一些步驟來創(chuàng)建你自己的合成項目。

創(chuàng)建一個新的合成項目

1. 進入到 http://photosynth.net/create.aspx 并且單擊“創(chuàng)建”按鈕。

2. Photosynth會提示你簽入，使用你自己的Live ID簽入。

3.在簽入后，你會看到“創(chuàng)建合成”對話框。單擊“添加照片”按鈕并選擇你需要加入到項目中的所有圖片。這時你會在你的窗體中看到前面那樣的現(xiàn)示。

4.并且在你的圖片上添加一些標記、填寫描述信息，可見性以及照片的合適的權限。在你完成這些字段后，“合成（Synth）”按鈕會變成可用。

提示：在你的合成項目中至少需要選擇3張圖片。

5.單擊“創(chuàng)建”按鈕，Photosynth會開始上傳并處理你的合成項目.這可能花費數(shù)分鐘。

6.當這個過程完成以后，單擊“查看”按鈕，你能看到這個合成。在你上傳完成以后，在同一位置也會顯示一個“取消”按鈕，你現(xiàn)在已經(jīng)創(chuàng)建了第一個Photosynth！很好。

7.為了添加一個高亮（一個特殊圖像的快捷方式），選擇右上角的“高亮”選項卡。接著使用Photosynth查看器導航到你需要高亮的圖像并添加一個高亮。下面的圖像顯示了一個添加了幾個高亮Photosynth項目。

8.完成以后單擊“保存”按鈕，你現(xiàn)在可以分享你的合成項目了。

分享你的Synths

共享您的 synths 是一個簡單的操作。 人們也可以在Photosynth.net發(fā)現(xiàn)他們，創(chuàng)建你的合成完成以后，你可以指定的一個特殊的標記或者可以創(chuàng)建一個的鏈接嵌入到您的網(wǎng)站或博客上來共享 Photosynth。 這兩種方式基本上是相同。

在線分享synths

1. 進入到 http://photosynth.net 并且簽入。

2. 單擊屏幕頂上你的名字（這個鏈接為”” “Signed in as:<你的名字>”)。

3.單擊屏幕頂端的“合成”按鈕。

4.你能看見你所創(chuàng)建的synths.選擇一個你想要分享的synth。

5.在synth項目的底部，你會看到一些讓你分享代碼的嵌入式代碼，甚至你可以將synth加入到你的收藏夾中，這個嵌入鏈接用HTML代碼以IFrame標簽的方式將Photosynth查看器嵌入到你的引用的頁中。您可以粘貼此HTML代碼到網(wǎng)頁中。

6.分享圖標為你的synth創(chuàng)建一個查看器的URI，因此，您可以復制這個URI成即時消息或電子郵件發(fā)送出去。

7.單擊“分享”圖標并且復制這些文本，他們看起來像下面這樣：

http://photosynth.net/view.aspx?cid=d7de4242-db75-4cbe-ae09-

100908205b0d&m=false&i=0:0:20&c=1.00941:-0.546529:-0.0530795&z=

177.390922003041&d=-1.99872539837712:-1.04816317761388:-0.530711994658234&p=

0:0&t=Falseasd

8. 提示： CID= 這個URI處理過程中的參數(shù). 這個CID是一個唯一的GUID，它將標識一個獨有的synth.

你需要保存一份這個URI的副本。 下一節(jié)中您將需要這個CID嵌入 Silverlight 查看器的自定義網(wǎng)頁。 嵌入了該查看器消除了使用一個 IFrame 的需要。 該 CID 用于通過 JavaScript API 允許您構建一個圍繞合成器應用程序。

   未完待續(xù)