OpenSeadragon入門了解請看第一篇：http://www.cnblogs.com/yingjiehit/p/4362377.html
OpenSeadragon給我們提供了很多的可選界面元素，這些界面元素可以通過簡單的配置很容易的能使用了。
此外，OpenSeadragon旨在讓你把它的控制綁定到完全由你自定義的界面（例如，自定義一個按鈕，按下就執行OpenSeadragon界面里的控制）。
OpenSeadragon提供了很多選項來約束限定最大最小的變焦范圍和規划的范圍（也就是整張圖的邊界范圍）。
這些特征一般是通過不同的選項組合控制的。快速看效果可以看官網的Demo http://openseadragon.github.io/examples/ui-zoom-and-pan/
(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基礎上，我們設置這兩個屬性,運行以下代碼，你拖動圖片，你將感受到效果：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>OpenSeadragon_Demo1</title> 6 <script src="openseadragon.min.js"></script> 7 </head> 8 <body> 9 <h1>圖像顯示范圍控制</h1> 10 <div id="openSeadragon1" style="width:500px; height:400px; border:1px solid blue;"></div> 11 </body> 12 <script type="text/javascript"> 13 var openSeadragon = OpenSeadragon({ 14 id: "openSeadragon1", //指定顯示的div 15 prefixUrl: "./images/", //庫中按鈕等圖片所在文件夾 16 tileSources: { 17 Image: { 18 xmlns: "http://schemas.microsoft.com/deepzoom/2009",//指令集 19 Url: "./aaa_files/", //圖片庫地址 20 Overlap: "1", //相鄰圖片重合的像素 21 TileSize: "256", //單個切片（正方形）的邊長 22 Format : "jpg", //切片格式 23 Size:{ //圖片總大小 24 Height: "1600", 25 Width: "2560" 26 } 27 } 28 }, 29 visibilityRatio : 0.3, //圖片在框內的最小比例 30 constrainDuringPan : true //管拖拽,true就不能拖拽了 31 }); 32 </script> 33 </html>
怎么也拖拽不出去更多了:
將visibilityRatio 設為1、將constrainDuringPan 設為true，這樣，圖像將不能有一點被拖出邊框:
(2)設置圖像的放大倍數允許范圍
defaultZoomLevel :初始化默認放大倍數，按home鍵也返回顯示該放大倍數，值為0時則顯示自動適應顯示框(view)的倍數,默認值為0
minZoomLevel 最小允許放大倍數 默認值null
maxZoomLevel 最大允許放大倍數 默認值null
(3)移動方向限制
panHorizontal： 水平移動約束，設為true則圖片可以水平被拖動，false則不能水平移動，默認值true。
(4)開啟調試模式
debugMode:設置為true的時候調試模式開啟，此時將會在圖片上顯示放大倍數、層數等信息，每一張切片的位置也會被顯示。
我們將上面的關鍵代碼OpenSeadragon改為:
1 var openSeadragon = OpenSeadragon({ 2 id: "openSeadragon1", //指定顯示的div 3 prefixUrl: "./images/", //庫中按鈕等圖片所在文件夾 4 tileSources: { 5 Image: { 6 xmlns: "http://schemas.microsoft.com/deepzoom/2009",//指令集 7 Url: "./aaa_files/", //圖片庫地址 8 Overlap: "1", //相鄰圖片重合的像素 9 TileSize: "256", //單個切片（正方形）的邊長 10 Format : "jpg", //切片格式 11 Size:{ //圖片總大小 12 Height: "1600", 13 Width: "2560" 14 } 15 } 16 }, 17 debugMode : true, //開啟調試模式 18 panHorizontal: false, //不能水平移動了，只能豎直移動 19 defaultZoomLevel: 5, //初始化默認放大倍數，按home鍵也返回該層 20 minZoomLevel: 3, //最小允許放大倍數 21 maxZoomLevel: 20, //最大允許放大倍數 22 });
將會得到以下效果
發現不能左右拖動，只能上下拖動了，並且多了很多顯示的數據，一開始放大倍數為5倍，最多可以放大20倍，最少也要看放大3被的。
如何查看放大倍數呢？我們將panHorizontal改為true。
1 var openSeadragon = OpenSeadragon({ 2 ... 3 panHorizontal: true, //可以水平移動 4 ... 5 });
此時就能將圖片往右下方拖，在左上方有標記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) 最大放大倍數