富圖像應用（第一部分）

　　在這章，你會學到下列內容：

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

　　Silverlight富圖像應用

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

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

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

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

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

　　在這一節中，你將會看到Silverlight的深度縮放（Deep Zoom）應用，你也會首次見識到如何安裝和注冊Deep Zoom Composer。你還會學得怎樣建立一個深度縮放（Deep Zoom）圖片和深度縮放（Deep Zoom）圖片集。再者，你還會學到如何使用MultiScaleImage控件來開發這種應用程序并對圖片集合進行編程。

　　開始使用Deep Zoom Composer 工具

　　Deep Zoom Composer 是微軟的免費工具. 你可以通過這個網站下載和安裝這個工具http://www.silverlight.net/learn/quickstarts/deepzoom/。在這一部分完成后你學會了創建一個單一圖像的深度縮放（Deep Zoom）應用。不過這些都需要你首先下載和安裝Deep Zoom Composer工具。

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

　　1. 打開 Deep Zoom Composer程序. 在引導開始, 選擇 New Project…

　　2. 在新建工程對話框中, 鍵入 SbSCh5_1作為你的工程名. 它默認存儲到我的文檔目錄下。

　　3. 單擊“確定”，你會進入到深度縮放（Deep Zoom）的主界面，不過它現在還是空的工程，工作區的三個選項卡清晰地標明了三個處理過程。

　　4. 這是一個重要的步驟. 在工作區的右邊你會看到“添加圖像（Add Image）”按鈕。單擊這個按鈕你將會打開一個標準的”打開文件“的對話框。選擇一張圖片將圖片加入到工作區，雖然你能夠添加多個圖像到工作區中，不過你現在不需要那么做，這個例子只需要一張圖片。下一步將來設計這張圖片。

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

　　6. 將工作區下方的一張縮微圖拖放到設計區中，你也可以通過鼠標滾輪來縮放圖像查看整個圖像。

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

　　8. 現在單擊“導出（Export）“按鈕開始導出這個工程。當你單擊“導出”選項卡時，你會看到一個Silverlight Deep Zoom控件欄提示你使用縮放圖像，并且可以以同樣的方式在線使用，它也會讓你導出你在任何地方可見的應用程序。 

　　9.默認是導出成DeepZoomPix賬戶。而且這個服務會在下一個版本的Deep Zoom Composer更新時停止并且刪除掉，因此你單擊“自定義（Custom）“選項卡。

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

　　11. 當導出過程完成后，你會繼續看到選項卡,它提供了四個選項：在瀏覽器中預覽；查看圖像目錄；查看項目目錄；更多的學習。這兒“查看項目目錄”的選項將變灰，因為您在上一步中選擇的是一個不包含源的模板。在下一節中，您將看到有關的詳細信息。

　　12. 請選擇“在瀏覽器中預覽”選項。 您的瀏覽器將啟動并打開包含深度縮放（Deep Zoom）基于 Silverlight站點的內容。

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

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

　　創建深度縮放（Deep Zoom）集合圖像

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

　　使用多個圖像：

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

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

　　3.單擊“設計（Composer）”選項卡，你會在工作區的下方的看剛添加的那些圖像。

　　4.選擇其中的一張圖片并將它拖放到設計器中。

　　5.使用鼠標在這個圖像上做一點點小的縮放，同時將另一張圖片放在它的一邊。這張新的圖片就會和第一張圖片處在不同的縮放級。

　　6.在圖像的其它位置進行縮放操作。

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

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

　　將鏈接添加到您的項目

　　1.回到“設計（Composer）”選項卡，在圖像窗格下找到“區域（Area）”工具選擇它，從而添加一個區域到設計器上。

　　2. Deep Zoom Composer 會添加一個灰色區域到你的設計器中，你能改變區域的尺寸并能放置在圖像的任何地方。

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

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

　　5.現在定義一個外部鏈接。 按照你原來相同的方式添加和放置另一個“區域”。

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

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

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

　　9.單擊“導出（Export）”選項卡，并導出前面討論項目。當您查看項目，這個區域不會被標記為可見。 用戶懸停在一個的區域時，Silverlight 應用程序將顯示一個熱點和大綱。 這表明這個區域是可見的。

　　提示：單擊一個內部鏈接會使Silverlight跳轉到鏈接的圖像，放大的它將填補當前的屏幕區域。 默認情況下，Deep Zoom Composer在每個圖像上創建默認的內部鏈接，讓您快速縮放該圖像。單擊其上另一個外部鏈接，生成一個打開外部 URL新的瀏覽器實例。   未完待續