你的位置:首页 > 软件开发 > Java > 学习OpenSeadragon之二 (界面缩放与平移规则设置)

学习OpenSeadragon之二 (界面缩放与平移规则设置)

发布时间:2015-03-25 20:00:06
OpenSeadragon入门了解请看第一篇:http://www.cnblogs.com/yingjiehit/p/4362377.htmlOpenSeadragon给我们提供了很多的可选界面元素,这些界面元素可以通过简单的配置很容易的能使用了。此外,OpenSeadragon ...

学习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 (#换成@)。

可能感兴趣文章

我的浏览记录