使用DeeepZoom Composer進行富圖像應用的開發（翻譯--2）

作者: suyan010203 來源: 博客園發布時間: 2010-11-08 22:03 閱讀: 981 次推薦: 0 原文鏈接 [收藏]

　　Deep Zoom程序設計

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

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

　　開發Deep Zoom程序

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

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

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

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

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

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

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

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

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

　　和圖像交互

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

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

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

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

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

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

　　6.現在切換到代碼視圖并打開MainPage.xaml.cs 文件，你首先需要添加代碼來設置MultiCScaleImage控件的Source屬性，那么他可以在運行時呈現。（還記得嗎，你從XAML視圖中移除了Source屬性來避免產生錯誤，所以你需要在后置代碼中來加上來）在C#中，這是很容易的事情，我們只需要創建一個Uri對象并且標明這個XML的位置即可。現在你能使用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 +=，你就會看到一個提示詢問您是否要創建默認事件處理程序。按 Tab 鍵來完成，聲明，然后同樣的方式創建其它的事件處理程序。這是一個很大的快捷方式！事件聲明應如下所示：

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 是底部或右側的的軸其中，軸是寬度或圖片的高度。因此，要你的圖像中移動縮放后的區域，您需要更改 ViewPointOrigin 坐標的 Y 值。

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

voidbtnUp_Click(object sender, RoutedEventArgs e)
{
Point o = msi.ViewportOrigin;
o.Y += 0.1;
msi.ViewportOrigin = o;
}

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

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

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

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

double zoom = 1.0;

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

voidbtnIn_Click(object sender, RoutedEventArgs e)

{

zoom *= 1.3;

msi.ZoomAboutLogicalPoint(zoom,

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

}

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

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

　　Silverlight照片合成（Photosynth）

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

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

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

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

　　創建照片合成（Photosynth）

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

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

　　安裝PhotosynthCreation工具

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

　　安裝PhotosynthCreation

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

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