使用DeeepZoom Composer進行富圖像應用的開發（翻譯--完）
建立Photosynth網絡應用程序
微軟提供的Javascript庫允許你使用Silverlight接口與Photosynth呈現器進行交互。你可以從http://photosynth.net/api/docs/default.html 找到這個Javascipt庫的API。
提示：這本書是寫針對 Photosynth JavaScript API 庫的版本 0.1。如果你需要使用更新的版本，則需要重構你的應用程序。
本節說明如何對您自己的網頁如何操縱Photosynth 查看器（沒有IFrame），并提供了一個簡單的示例使用 JavaScript Photosynth API 來檢索您合成器中的圖像中的一些詳細信息。這里也使用了和祖明的Stargate Universe Photosynth相同的技術。你可以從http://stargate.mgm.com/photosynth/index.html.看到他的詳細使用。
使用API建立一個網絡應用程序
1.打開Visual Web Developer并選擇文件菜單下的“新的Web站點”命令。
2.在“新的站點”對話框中選擇“空的惡Web站點”模板。
3.鍵入一個新的“SbSPSDemo”的新的應用程序。
4. Visual Web Developer將會創建一個新的工程。現在你可以添加一個命名為“index.htm”的HTML文件。
5.在這個新的“index.htm”文件中，編輯“head”標簽，在里面添加一個Photosynth Javascript庫的引用。如下所示：
<head>
<title>Photosynth Test</title>
<script type="text/javascript" src="http://photosynth.net/api/Silverlight.js" >
</script>
<script type="text/javascript"
src="http://photosynth.net/api/Microsoft.Photosynth.js" >
</script>
</head>
6.編輯“body”標簽創建兩個“div”層：一個放置你的synth,另一個則放在關于你的synth的其他信息。
提示：“body”標簽的“onload”屬性設置為”bodyLoaded”方法。
<body onload="bodyLoaded();">
<div id="pslayer" style="position: absolute; width: 742px; height: 501px; left:
13px; top: 56px"></div>
<div id="detailslayer" style="position: absolute; width: 273px; height: 496px;
left: 766px; top: 52px">TEST</div>
</body>
7.現在“bodyLoaded”方法將會在你的頁面載入時執行。他會使用Javascript API 載入你的synth.要這樣做，你需要做以下的三個步驟：
a.在頁面的第一個“div”標簽中初始化一個新的“Microsoft.Photosynth.Viewer”對象。
b.設置玩家的載入參數，包括您的synth的 GUID。如果您還沒有 GUID，請查看上一節申請一個。這樣，它會幫助你和Photosynth.net上的成千上萬的synth區別開來。
c.用這個GUID初始化呈現器的參數。
8.下面的事“bodyLoaded”方法的代碼。記得放在你的HTML標記的“head”標簽中。
<script type="text/javascript">
function bodyLoaded() {
var SYNTH = "d7de4242-db75-4cbe-ae09-100908205b0d";
viewer = new Microsoft.Photosynth.Viewer("pslayer");
varloadParameters = new
Microsoft.Photosynth.Viewer.LoadParameters(SYNTH,"",false,false);
viewer.loadCollectionAsync(loadParameters);
}
</script>
9.按F5運行，你會看到你的命名為“Test”的synth頁面。這是因為還有一個命名為“detaillayer”的“div”標簽初始化了這個文本。
這是值得花費一些時間試試這個 API。一個非常有用的功能是， Photosynth API 可以提供當前正在查看的圖像的 ID。該 ID 對某些應用程序是很有用的，因為它可用于獲取有關該synth的上下文相關數據。例如如果你在使用 Stargate synths 就會注意頁面是基于您正在查看的圖像在更新。
synths也經常包含復活節彩蛋synths。下一個示例將引導您完成這個項目，并發現它們是如何工作的。
添加復活節彩蛋
1.每當用戶移動到新圖像，Photosynth 觸發 moveToImageCompleted事件。您需要做的第一件事來處理該事件，編輯bodyLoaded處理程序函數，將它命名為ImageMoved?，F在，添加以下bodyLoaded 函數：
viewer.moveToImageCompleted = ImageMoved;
2.接下來，您需要寫的是相當簡單的事件處理程序。下面的事件處理程序將呈現當前正在查看詳細信息中的圖像的 ID：
functionImageMoved(sender) {
id = viewer.getSelectedImageId();
document.getElementById("detailslayer").innerHTML = id;
}
3. 按F5 運行該應用程序并瀏覽synth。你從一個圖像移動到另一個圖像，您將看到當前圖像的ID顯示在 detailslayer中。
4. 要使你顯示的信息更有意義，您需要編寫代碼來檢查HTML 分配給圖像的 ID。因為可能你會有很多圖像，您通過一個大的 case 語句為HTML創建不同 id 的代碼段。另外，如果你想要能夠處理龐大的圖像 id列， 您可能會建立一個服務調用一個的數據庫發送 ID，而后將它呈現在 HTML 相應的圖層中— — 這個快速教程簡單地說明了一些基礎知識。更高級的知識您可以在其余時間瀏覽 http:photosynth.netapidocsdefault.html 的示例。以下是完整地 HTML：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Photosynth Test</title>
<script type="text/javascript"
src="http://photosynth.net/api/Silverlight.js" ></script>
<script type="text/javascript"
src="http://photosynth.net/api/Microsoft.Photosynth.js" ></script>
<script type="text/javascript">
function bodyLoaded() {
var SYNTH = "d7de4242-db75-4cbe-ae09-100908205b0d";
viewer = new Microsoft.Photosynth.Viewer("pslayer");
varloadParameters = new Microsoft.Photosynth.Viewer.LoadParameters(
SYNTH, "", false, false);
viewer.moveToImageCompleted = ImageMoved;
viewer.loadCollectionAsync(loadParameters);
}
function ImageMoved(sender) {
id = viewer.getSelectedImageId();
document.getElementById("detailslayer").innerHTML = id;
}
</script>
</head>
<body onload="bodyLoaded();">
<div id="pslayer" style="position: absolute;
width: 742px; height: 501px; left: 13px; top: 56px">
</div>
<div id="detailslayer" style="position: absolute;
width: 273px; height: 496px; left: 766px; top: 52px">
Test
</div>
</html>
浙公網安備 33010602011771號