天天看點

一起談.NET技術,使用DeeepZoom Composer進行富圖像應用的開發(翻譯--2)

  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”模闆。

一起談.NET技術,使用DeeepZoom Composer進行富圖像應用的開發(翻譯--2)

  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控件:

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

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

Source="GeneratedImages/dzc_output.xml">

</MultiScaleImage>

</Grid>

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

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

關閉浏覽器,确信Visual Web Developer沒有在調試狀态下。這是你能檢視XAML視圖,并且通過以下的一些步驟會圖像能互動。

一起談.NET技術,使用DeeepZoom Composer進行富圖像應用的開發(翻譯--2)

  和圖像互動

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

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

  2.将兩個StackPanel控件拖放到XAML視圖中,像下面那樣編輯代碼:

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

  3.在StackPanel控件裡添加Orientation參數,設定第一個StackPanel的Orientation為Vertical,第二個StackPanel的Orientation為Horizontal:

<StackPanel Orientation="Vertical">

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

</StackPanel>

  4.将MultiScaleImage控件作為第一個StackPanel控件的孩子:

  5.在水準StackPanel加入四個按鈕控件。命名分别為:btnLeft, btnRight, btnUp,

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

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

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

btnUp.Click += new RoutedEventHandler(btnUp_Click);

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

voidbtnUp_Click(object sender, RoutedEventArgs e)

{

throw new NotImplementedException();

}

  9. 現在,您可以添加一些代碼的事件處理程式。 将此代碼放到了 btnUp_Click

處理程式:

Point o = msi.ViewportOrigin;

o.Y += 0.1;

msi.ViewportOrigin = o;

  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)是使您可以從不同的角度擷取一些相同圖檔并将它們合成同一個場景中的三維模拟技術。試想你站在一個房間裡。你拍一張照片的了的門,然後向左轉一點并拍了另一張照片。第二張照片中,可能會有門一部分。照片合成技術可以檢測的重疊和縫合成一個完整圖像。

  最終結果将提供一個模拟站在房間的體驗。 使用者環繞這個場景, 照片合成技術計算出要呈現的最佳圖檔,并轉換這些圖檔,盡可能模拟出他們站在房間裡的效果!

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

一起談.NET技術,使用DeeepZoom Composer進行富圖像應用的開發(翻譯--2)

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

  建立照片合成(Photosynth)

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

一起談.NET技術,使用DeeepZoom Composer進行富圖像應用的開發(翻譯--2)

  安裝PhotosynthCreation工具

  在你登陸到Photosynth後,你會看到首頁,它包括一個Photosynths數字(所謂的“synths”短名字)标記,在螢幕的頂端你會看到一個“建立(Create)”連結。

  安裝PhotosynthCreation

  2.單擊“Install Photosynth”按鈕,不久你會看到Photosynth檔案下載下傳,單擊“運作”按鈕下載下傳并安裝Photosynth工具。

一起談.NET技術,使用DeeepZoom Composer進行富圖像應用的開發(翻譯--2)

  3.這個工具會下載下傳并安裝。注意到這并不是一個由Silverlight實作的Photosynth檢視器。這是一個使用認證Photosynths的Windows應用程式。你最終的目的不是要應用程式檢視你的圖像—這是Silverlight做的事。

  4.接下來安裝向導會指導你安裝建立工具。

  使用合成建立器(Synth Creator)

  現在你已經安裝了建立器,你可以單擊http://photosynth.net/create.aspx 上的“建立”按鈕來建立一個新的合成器(synth)項目。這一部分你講通過一些步驟來建立你自己的合成項目。

  建立一個新的合成項目

  1. 進入到 http://photosynth.net/create.aspx 并且單擊“建立”按鈕。

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

一起談.NET技術,使用DeeepZoom Composer進行富圖像應用的開發(翻譯--2)

  3.在簽入後,你會看到“建立合成”對話框。單擊“添加照片”按鈕并選擇你需要加入到項目中的所有圖檔。這時你會在你的窗體中看到前面那樣的現示。

  4.并且在你的圖檔上添加一些标記、填寫描述資訊,可見性以及照片的合适的權限。在你完成這些字段後,“合成(Synth)”按鈕會變成可用。

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

  5.單擊“建立”按鈕,Photosynth會開始上傳并處理你的合成項目.這可能花費數分鐘。

一起談.NET技術,使用DeeepZoom Composer進行富圖像應用的開發(翻譯--2)

  6.當這個過程完成以後,單擊“檢視”按鈕,你能看到這個合成。在你上傳完成以後,在同一位置也會顯示一個“取消”按鈕,你現在已經建立了第一個Photosynth!很好。

  7.為了添加一個高亮(一個特殊圖像的快捷方式),選擇右上角的“高亮”頁籤。接着使用Photosynth檢視器導航到你需要高亮的圖像并添加一個高亮。下面的圖像顯示了一個添加了幾個高亮Photosynth項目。

一起談.NET技術,使用DeeepZoom Composer進行富圖像應用的開發(翻譯--2)

  8.完成以後單擊“儲存”按鈕,你現在可以分享你的合成項目了。

  分享你的Synths

  線上分享synths

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

  2. 單擊螢幕頂上你的名字(這個連結為”” “Signed in as:<你的名字>”)。

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

  4.你能看見你所建立的synths.選擇一個你想要分享的synth。

一起談.NET技術,使用DeeepZoom Composer進行富圖像應用的開發(翻譯--2)

  6.分享圖示為你的synth建立一個檢視器的URI,是以,您可以複制這個URI成即時消息或電子郵件發送出去。

  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處理過程中的參數. 這個CID是一個唯一的GUID,它将辨別一個獨有的synth.

   未完待續