學習OPENSEADRAGON之二 (介面縮放與平移規則設定)
OpenSeadragon入門瞭解請看第一篇：http://www.cnblogs.com/yingjiehit/p/4362377.html
OpenSeadragon給我們提供了很多的可選介面元素，這些介面元素可以通過簡單的配置很容易的能使用了。
此外，OpenSeadragon旨在讓你把它的控制繫結到完全由你自定義的介面（例如，自定義一個按鈕，按下就執行OpenSeadragon介面裡的控制）。
OpenSeadragon提供了很多選項來約束限定最大最小的變焦範圍和規劃的範圍（也就是整張圖的邊界範圍）。
這些特徵一般是通過不同的選項組合控制的。
快速看效果可以看官網的Demo
（1）拖拽平移的約束引數
visibilityRatio：規定了影象在顯示框中最少要保留的比例，預設值0.5,範圍0-1,0表示影象可以完全被移動到顯示框之外，1表示，影象一點也不能被移動到顯示框之外，
如果用滑鼠將圖片拖拽出去，圖片還會自動彈回來，0.3表示影象至少要有30%在顯示框之內，如果影象被拖出超過30%，鬆開滑鼠後將會恢復到30%的影象在框內。
例如要設定影象最小保留比例為30%,關鍵程式碼為：
OpenSeadragon({ ... visibilityRatio : 0.3, //圖片在框內的最小比例 ... });
constrainDuringPan : 規定了影象是否能被拖拽出允許最小範圍，true為不允許，false為允許 配合上面的visibilityRatio引數使用，也就是是說，例如visibilityRatio為0.3
constrainDuringPan 為true的時候,圖片被拖出70%之後就不能再拖出更多了，將其設定為false的時候，圖片可以被完全脫出顯示框，但是鬆開滑鼠之後，圖片會自動彈回到保留30%的位置。
在上一篇http://www.cnblogs.com/yingjiehit/p/4362377.html的Demo基礎上，我們設定這兩個屬性,執行以下程式碼，你拖動圖片，你將感受到效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OpenSeadragon_Demo1</title>
<script src="openseadragon.min.js"></script>
</head>
<body>
<h1>影象顯示範圍控制</h1>
<div id="openSeadragon1" style="width:500px; height:400px; border:1px solid blue;"></div>
</body>
<script type="text/javascript">
var openSeadragon = OpenSeadragon({
id: "openSeadragon1", //指定顯示的div
prefixUrl: "./images/", //庫中按鈕等圖片所在資料夾
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2009",//指令集
Url: "./aaa_files/", //圖片庫地址
Overlap: "1", //相鄰圖片重合的畫素
TileSize: "256", //單個切片（正方形）的邊長
Format : "jpg", //切片格式
Size:{ //圖片總大小
Height: "1600",
Width: "2560"
}
}
},
visibilityRatio : 0.3, //圖片在框內的最小比例
constrainDuringPan : true //管拖拽,true就不能拖拽了
});
</script>
</html>怎麼也拖拽不出去更多了：
將visibilityRatio 設為1、將constrainDuringPan 設為true，這樣，影象將不能有一點被拖出邊框:
（2）設定影象的放大倍數允許範圍
defaultZoomLevel :初始化預設放大倍數，按home鍵也返回顯示該放大倍數，值為0時則顯示自動適應顯示框(view)的倍數,預設值為0
minZoomLevel 最小允許放大倍數 預設值null
maxZoomLevel 最大允許放大倍數 預設值null
（3）移動方向限制
panHorizontal： 水平移動約束，設為true則圖片可以水平被拖動，false則不能水平移動，預設值true。
（4）開啟除錯模式
debugMode:設定為true的時候除錯模式開啟，此時將會在圖片上顯示放大倍數、層數等資訊，每一張切片的位置也會被顯示。
我們將上面的關鍵程式碼OpenSeadragon改為：
var openSeadragon = OpenSeadragon({
id: "openSeadragon1", //指定顯示的div
prefixUrl: "./images/", //庫中按鈕等圖片所在資料夾
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2009",//指令集
Url: "./aaa_files/", //圖片庫地址
Overlap: "1", //相鄰圖片重合的畫素
TileSize: "256", //單個切片（正方形）的邊長
Format : "jpg", //切片格式
Size:{ //圖片總大小
Height: "1600",
Width: "2560"
}
}
},
debugMode : true, //開啟除錯模式
panHorizontal: false, //不能水平移動了，只能豎直移動
defaultZoomLevel: 5, //初始化預設放大倍數，按home鍵也返回該層
minZoomLevel: 3, //最小允許放大倍數
maxZoomLevel: 20, //最大允許放大倍數
});將會得到以下效果：
發現不能左右拖動，只能上下拖動了，並且多了很多顯示的資料，一開始放大倍數為5倍，最多可以放大20倍，最少也要看放大3被的。
如何檢視放大倍數呢？我們將 panHorizontal改為true。
var openSeadragon = OpenSeadragon({
...
panHorizontal: true, //可以水平移動
...
});此時就能將圖片往右下方拖，在左上方有標記Zoom顯示當前放大了多少倍：
以下是本次用到的屬性和一些常用圖片檢視控制屬性總結，讀者可以自己試驗一下效果:
panHorizontal(default: true) 水平允許拖拽panVertical(default: true) 豎直允許拖拽constrainDuringPan(default: false) 是否限制拖拽出允許顯示範圍wrapHorizontal(default: false) 在水平方向會連續顯示，例如當影象顯示到右邊緣以外的時候，會把影象的左邊緣跟右邊緣結合，接著顯示，一般用於顯示地圖wrapVertical(default: false) 垂直方向連續顯示visibilityRatio(default: 0.5) 圖片在顯示框view中被限制的最小百分百minPixelRatio(default: 0.5) 最小畫素比，這個值越高效果，停止顯示更高效果的值就約低，比如頻寬低的時候可以設定在1.5，具體效果我也沒完全讀懂minZoomImageRatio(default: 0.9) 最小允許的縮小比例maxZoomPixelRatio(default: 2) 畫素最大允許放大比例，如果是設定為“infinite”可以無限放大，在HTML5的canvas中用的時候,如果viewing device不可用則效果會不好defaultZoomLevel(default: 0) 預設顯示的放大倍數，頁面剛開啟或按home鍵時候的放大倍數，0則自動適應viewminZoomLevel(default: null) 最小放大倍數maxZoomLevel(default: null) 最大放大倍數
來源於：