富圖像應(yīng)用（第一部分）

　　在這章，你會(huì)學(xué)到下列內(nèi)容：

• 使用Deep Zoom Composer 工具建立高質(zhì)量、高度友好的圖像。
• 組合為平滑、可縮放的全景圖像。
• 建立以編程形式方式控制的深度縮放的Silverlight應(yīng)用程序。
• 使用Photosynth來創(chuàng)建互操作的3-D圖像。
• 使用Silverlight和Javascript建立基于Photosynth的應(yīng)用程序。

　　Silverlight富圖像應(yīng)用

　　在第二章‘Silverlight控件’中，我們學(xué)習(xí)了如何使用Image控件在你的Silverlight設(shè)計(jì)中呈現(xiàn).jpg和.png圖像。這是一個(gè)非常有用的功能，不過它只能抓取到Silverlight網(wǎng)頁應(yīng)用程序的所見圖像。試想通過數(shù)字?jǐn)z像機(jī)捕獲到的一張圖片的尺寸達(dá)到五、六兆字節(jié)或更大。一張普通的高分辨率的照片可能達(dá)到3000到4000像素，不過我們的顯示屏的分辨率通常是1024，也就是說其中的大部分的尺寸空間給白白的浪費(fèi)了。在網(wǎng)站上，不論是你是用通過滾動(dòng)條來查看所有詳細(xì)信息還是將圖像縮放以調(diào)整到適合屏幕的大小—這都是一樣的效果。

　　不幸的是，指定在 HTML 中圖像的大小也不能完全解決這個(gè)問題.如果你這樣做，瀏覽器會(huì)減小的尺寸來呈現(xiàn)圖像，不過它仍然會(huì)下載完整的圖像。 也就是說瀏覽器還是會(huì)下載 5 或 6 兆字節(jié)的數(shù)據(jù)量。或許這一種替代方法可以解決這個(gè)問題，在上傳圖像之前就調(diào)整好大小，典型的做法是用一種圖像工具生成更小版本的圖像，然后再你的網(wǎng)頁中使用這個(gè)小版本的圖片。

有沒有在這兩個(gè)領(lǐng)域達(dá)到最佳方式呢？ 也就是你呈現(xiàn)的圖片下載的數(shù)據(jù)量小，同時(shí)又有完整的圖像保真度。Silverlight 的深度縮放（Deep Zoom）方式可能解決這個(gè)問題。這個(gè)深度縮放（Deep Zoom）工具能創(chuàng)建多個(gè)分辨率版本的圖像而且可以將一張圖片分割成多個(gè)小的瓷片。然后，使用者可以的查看、縮放圖像，與此同時(shí)，應(yīng)用程序?qū)⒏鶕?jù)你的選擇來下載合適的部分來呈現(xiàn)這些瓷片。在線地圖應(yīng)用就應(yīng)用了這種方式，用戶并不會(huì)下載街道中的每一張圖片——他們只下載正在查看的那個(gè)區(qū)域的數(shù)據(jù)。

　　照片合成（Photosynth） 是另一種富圖像處理技術(shù)，它分析一組圖片的重疊內(nèi)容， 并可以縫結(jié)合起來以自動(dòng)創(chuàng)建一個(gè)全景圖片。 它甚至可以創(chuàng)建3-D模型的場景以及進(jìn)行圖像的定位。用戶可以探索這個(gè)3-D世界，通過圖像的縮放來看到更詳細(xì)的信息。 Silverlight 深度縮放（Deep Zoom）也使用了同樣的技術(shù)，接下來我們將指導(dǎo)你在Silverlight中使用這種提高網(wǎng)絡(luò)帶寬利用率的技術(shù)來豐富你的網(wǎng)頁。

　　在Silverlight中使用深度縮放（Deep Zoom）

　　在這一節(jié)中，你將會(huì)看到Silverlight的深度縮放（Deep Zoom）應(yīng)用，你也會(huì)首次見識(shí)到如何安裝和注冊(cè)Deep Zoom Composer。你還會(huì)學(xué)得怎樣建立一個(gè)深度縮放（Deep Zoom）圖片和深度縮放（Deep Zoom）圖片集。再者，你還會(huì)學(xué)到如何使用MultiScaleImage控件來開發(fā)這種應(yīng)用程序并對(duì)圖片集合進(jìn)行編程。

　　開始使用Deep Zoom Composer 工具

　　Deep Zoom Composer 是微軟的免費(fèi)工具. 你可以通過這個(gè)網(wǎng)站下載和安裝這個(gè)工具http://www.silverlight.NET/learn/quickstarts/deepzoom/。在這一部分完成后你學(xué)會(huì)了創(chuàng)建一個(gè)單一圖像的深度縮放（Deep Zoom）應(yīng)用。不過這些都需要你首先下載和安裝Deep Zoom Composer工具。

　　建立一個(gè)新的照片合成（Photosynth）工程：

　　1. 打開 Deep Zoom Composer程序. 在引導(dǎo)開始, 選擇 New Project…

　　2. 在新建工程對(duì)話框中, 鍵入 SbSCh5_1作為你的工程名. 它默認(rèn)存儲(chǔ)到我的文檔目錄下。

　　3. 單擊“確定”，你會(huì)進(jìn)入到深度縮放（Deep Zoom）的主界面，不過它現(xiàn)在還是空的工程，工作區(qū)的三個(gè)選項(xiàng)卡清晰地標(biāo)明了三個(gè)處理過程。

　　4. 這是一個(gè)重要的步驟. 在工作區(qū)的右邊你會(huì)看到“添加圖像（Add Image）”按鈕。單擊這個(gè)按鈕你將會(huì)打開一個(gè)標(biāo)準(zhǔn)的”打開文件“的對(duì)話框。選擇一張圖片將圖片加入到工作區(qū)，雖然你能夠添加多個(gè)圖像到工作區(qū)中，不過你現(xiàn)在不需要那么做，這個(gè)例子只需要一張圖片。下一步將來設(shè)計(jì)這張圖片。

　　5. 單擊工作區(qū)頂端的“設(shè)計(jì)（Compose）“按鈕，你將進(jìn)入到設(shè)計(jì)器視圖中，一組縮微圖將會(huì)顯示在工作區(qū)的下方。工作區(qū)的右邊僅僅顯示了你加入的一張圖片，你的屏幕看起來應(yīng)該像下面這樣。

　　6. 將工作區(qū)下方的一張縮微圖拖放到設(shè)計(jì)區(qū)中，你也可以通過鼠標(biāo)滾輪來縮放圖像查看整個(gè)圖像。

　　7.在Deep Zoom Composer中你可以是使用對(duì)齊工具來操作多個(gè)圖像，也可以提供可單擊的非圖像鏈接。不久以后你將會(huì)看到這些特征。現(xiàn)在我們只使用一張圖片。

　　8. 現(xiàn)在單擊“導(dǎo)出（Export）“按鈕開始導(dǎo)出這個(gè)工程。當(dāng)你單擊“導(dǎo)出”選項(xiàng)卡時(shí)，你會(huì)看到一個(gè)Silverlight Deep Zoom控件欄提示你使用縮放圖像，并且可以以同樣的方式在線使用，它也會(huì)讓你導(dǎo)出你在任何地方可見的應(yīng)用程序。 

　　9.默認(rèn)是導(dǎo)出成DeepZoomPix賬戶。而且這個(gè)服務(wù)會(huì)在下一個(gè)版本的Deep Zoom Composer更新時(shí)停止并且刪除掉，因此你單擊“自定義（Custom）“選項(xiàng)卡。

　　10. 選項(xiàng)卡頂部的輸出類型部分提供了三個(gè)選項(xiàng)：Images/Silverlight Deep Zoom/Seadragon。 您可以只導(dǎo)出所有生成的圖像和一個(gè) Silverlight Deep Zoom 項(xiàng)目或支持Javascript的項(xiàng)目。 為這項(xiàng)工作接受默認(rèn)設(shè)置，在選項(xiàng)卡上，給一個(gè)的名稱的項(xiàng)目，然后單擊導(dǎo)出按鈕。

　　11. 當(dāng)導(dǎo)出過程完成后，你會(huì)繼續(xù)看到選項(xiàng)卡,它提供了四個(gè)選項(xiàng)：在瀏覽器中預(yù)覽；查看圖像目錄；查看項(xiàng)目目錄；更多的學(xué)習(xí)。這兒“查看項(xiàng)目目錄”的選項(xiàng)將變灰，因?yàn)槟谏弦徊街羞x擇的是一個(gè)不包含源的模板。在下一節(jié)中，您將看到有關(guān)的詳細(xì)信息。

　　12. 請(qǐng)選擇“在瀏覽器中預(yù)覽”選項(xiàng)。 您的瀏覽器將啟動(dòng)并打開包含深度縮放（Deep Zoom）基于 Silverlight站點(diǎn)的內(nèi)容。

　　13. 現(xiàn)在，您可以體驗(yàn)到放大的圖像的平滑動(dòng)畫效果，嘗試使用縮放功能并且注意到在圖像與于瀏覽器交互的不同。這兒你能看到一個(gè)通過深度縮放（Deep Zoom）創(chuàng)建的單一圖像運(yùn)用。 在下一節(jié)中，您將看到更復(fù)雜的用Deep Zoom Composer生成的能夠管理多個(gè)圖片并添加可點(diǎn)擊的熱點(diǎn)應(yīng)用。

　　提示：這是一只為數(shù)不多的可愛的狗， 他的名字叫 Bucky。

　　創(chuàng)建深度縮放（Deep Zoom）集合圖像

　　您可以使用Deep Zoom Composer處理被稱為集合的多個(gè)圖像.當(dāng)處理集合圖像時(shí)，Deep Zoom Composer提供工具來導(dǎo)航這個(gè)集合。 Silverlight 還提供了API使您能夠以代碼方式管理集合中的單個(gè)圖像。在這一節(jié)中，你會(huì)看到如何使用Deep Zoom Composer按不同的縮放級(jí)來排列這些圖片，也會(huì)看到如何將圖像和外部鏈接之間的內(nèi)部連接加入到你的Web站點(diǎn)。

　　使用多個(gè)圖像：

　　1. 打開 Deep Zoom Composer 并且建立一個(gè)新的命名為 SbSCh5_2的工程。

　　2. 單擊“導(dǎo)入（Import）”選項(xiàng)卡的“添加圖像（Add Images）”按鈕，選擇幾張新的圖片添加到工程中。（你可以使用同一個(gè)對(duì)話框來選者多個(gè)圖片）

　　3.單擊“設(shè)計(jì)（Composer）”選項(xiàng)卡，你會(huì)在工作區(qū)的下方的看剛添加的那些圖像。

　　4.選擇其中的一張圖片并將它拖放到設(shè)計(jì)器中。

　　5.使用鼠標(biāo)在這個(gè)圖像上做一點(diǎn)點(diǎn)小的縮放，同時(shí)將另一張圖片放在它的一邊。這張新的圖片就會(huì)和第一張圖片處在不同的縮放級(jí)。

　　6.在圖像的其它位置進(jìn)行縮放操作。

　　7.雖然右下角的三幅畫看起來小，它們實(shí)際上是高分辨率圖像。 請(qǐng)注意Deep Zoom Composer將圖像置于不同的縮放級(jí)。

　　8.單擊“導(dǎo)出（導(dǎo)出）”選項(xiàng)卡導(dǎo)出您的項(xiàng)目，如前面的示例中所述，
Deep Zoom Composer 將為您創(chuàng)建深度縮放（ Deep Zoom） 的設(shè)計(jì)項(xiàng)目。這和創(chuàng)建一幅圖像的過程相似，但是您可以通過將某些功能添加到單個(gè)圖片來改進(jìn)它的效果。

　　將鏈接添加到您的項(xiàng)目

　　1.回到“設(shè)計(jì)（Composer）”選項(xiàng)卡，在圖像窗格下找到“區(qū)域（Area）”工具選擇它，從而添加一個(gè)區(qū)域到設(shè)計(jì)器上。

　　2. Deep Zoom Composer 會(huì)添加一個(gè)灰色區(qū)域到你的設(shè)計(jì)器中，你能改變區(qū)域的尺寸并能放置在圖像的任何地方。

　　3.右鍵單擊灰色區(qū)域，并從彈出式菜單中選擇“添加內(nèi)部鏈接”。 您將看到一個(gè)對(duì)話框，顯示圖片組合器的不同的圖像。從圖像中選擇此對(duì)話框中，單擊“確定”。

　　4. Deep Zoom Composer將建立這個(gè)內(nèi)鏈接。為了查看最后的組合區(qū)域，單擊指定的區(qū)域（在此示例中的眼睛 ）Silverlight 將縮放到剛選的鏈接的圖像。

　　5.現(xiàn)在定義一個(gè)外部鏈接。 按照你原來相同的方式添加和放置另一個(gè)“區(qū)域”。

　　6.這次，右鍵并且選擇“添加外部鏈接（Add External Link）”。

　　7.您將看到“外部鏈接管理（External Links Management）”對(duì)話框。 這允許您添加圖像和外部 URL 的選定的區(qū)域之間的聯(lián)系。 您是你第一次使用這項(xiàng)功能的，不過鏈表中不存在的URL將是無效的。所以你很容易的創(chuàng)建一個(gè)新url 并將其加入到列表中。

　　8.單擊列表的頂部“頁（Page）”圖標(biāo)。 在創(chuàng)建一個(gè)新的 URL 時(shí)，你可以給它一個(gè)短名稱，指定一個(gè)指向啟動(dòng)當(dāng)用戶單擊指定的區(qū)域，并提供一個(gè)說明。按屏幕截圖中所示填寫完這些字段，單擊保存。

　　9.單擊“導(dǎo)出（Export）”選項(xiàng)卡，并導(dǎo)出前面討論項(xiàng)目。當(dāng)您查看項(xiàng)目，這個(gè)區(qū)域不會(huì)被標(biāo)記為可見。 用戶懸停在一個(gè)的區(qū)域時(shí)，Silverlight 應(yīng)用程序?qū)@示一個(gè)熱點(diǎn)和大綱。 這表明這個(gè)區(qū)域是可見的。

　　提示：單擊一個(gè)內(nèi)部鏈接會(huì)使Silverlight跳轉(zhuǎn)到鏈接的圖像，放大的它將填補(bǔ)當(dāng)前的屏幕區(qū)域。 默認(rèn)情況下，Deep Zoom Composer在每個(gè)圖像上創(chuàng)建默認(rèn)的內(nèi)部鏈接，讓您快速縮放該圖像。單擊其上另一個(gè)外部鏈接，生成一個(gè)打開外部 URL新的瀏覽器實(shí)例。   未完待續(xù)

NET技術(shù)：使用DeeepZoom Composer進(jìn)行富圖像應(yīng)用的開發(fā)（翻譯--1），轉(zhuǎn)載需保留來源！

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