OpenSeadragon入门了解请看第一篇:http://www.cnblogs.com/yingjiehit/p/4362377.htmlOpenSeadragon给我们提供了很多的可选界面元素,这些界面元素可以通过简单的配置很容易的能使用了。此外,OpenSeadragon ...
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='/images/loading.gif' data-original="openseadragon.min.js"></script> 7 </head> 8 <body> 9 <h1>图像显示范围控制</h1>10 <div id="openSeadragon1" ></div>11 </body> 12 <script type="text/javascript">13 var openSeadragon = OpenSeadragon({14 id: "openSeadragon1", //指定显示的div15 prefixUrl: "./images/", //库中按钮等图片所在文件夹16 tileSources: {17 Image: {18 //指令集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>
原标题:学习OpenSeadragon之二 (界面缩放与平移规则设置)
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。