你的位置:首页 > Java教程

[Java教程]学习OpenSeadragon之五(工具条toolbar与自定义按钮)


OpenSeadragon简介:学习OpenSeadragon之一(一个显示多层图片的开源JS库)

一、工具条toolbar设置

OpenSeadragon为我们提供了现成的工具条toolBar,工具条上有按钮,可以默认实现放大、缩小、全屏、返回默认大小等功能,

toolBar默认出现在View里的左上角,我们也可以通过设置,让toolbar在View之外的地方显示:

我们只需要在HTML中创建一个div,并且在创建OpenSeadragon时设置toolbar的值为div的id即可。

 1 ... 2 <div id="toolbarDiv" ></div> 3 ... 4  5 <script type="text/javascript"> 6 OpenSeadragon({ 7     ... 8   toolbar: "toolbarDiv", //设置toolbar的值为所对应的div的id 9     ...10 });11 </script>

 

二、自定义按钮风格

toolbar里的按钮是库里自带的,我们也可以把它们改变成任何我们想要的形式,例如<a>标签、按钮<button>等等。

只需要设置按钮的值为对应元素的id即可,例如:

 1 var openSeadragon = OpenSeadragon({ 2   ... 3   zoomInButton:  "zoom-in",     //放大 4   zoomOutButton: "zoom-out",    //缩小 5   homeButton:   "home",      //恢复默认 6   fullPageButton: "full-page",    //全屏 7   nextButton:   "next",      //下一张图片 8   previousButton: "previous",    //前一张图片 9   ...10 });

在HTML中相应的元素就会具有相应按钮的功能。

翻页的时候会触发翻页事件,可以设置该事件的处理程序以显示当前页面:

结合上面的知识,我们就能做出截图上展示的效果了。

附上这个demo的完整代码:

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>OpenSeadragon_Demo10</title> 6   <script src="openseadragon.min.js"></script> 7 </head> 8 <body> 9   <div id="toolbarDiv" >10     <div style='float:right;'>11       <a href="" id="zoom-in">放大</a>12       <a href="" id="zoom-out">缩小</a>13       <a href="" id="home">返回默认</a>14       <a href="" id="full-page">全屏</a>15     </div>16     <div >17       <button id="previous">前一张图</button>18       <button id="next">下一张图</button>19       <div id="pageDiv" >第1张图/共2张</div>20     </div>21   </div>22   <div id="openSeadragon1" ></div>23 </body>24 <script type="text/javascript">25 var openSeadragon = OpenSeadragon({26   id: "openSeadragon1", 27   prefixUrl: "./images/", //库图片位置28   //图片来源29   tileSources: [{ 30     Image: {31       ,32       Url: "./ggg_files/",33       Overlap: "1",34       TileSize: "256",35       Format : "jpg",36       Size:{37         Height: "1080",38         Width: "1920"39       },40     },41   },{42     Image: {43       ,44       Url: "./aaa_files/",45       Overlap: "1",46       TileSize: "256",47       Format : "jpg",48       Size:{49         Height: "1600",50         Width: "2560"51       },52     },    53   }],54   zoomInButton:  "zoom-in",   //放大55   zoomOutButton: "zoom-out",  //缩小56   homeButton:   "home",    //恢复默认57   fullPageButton: "full-page", //全屏58   nextButton:   "next",    //下一张图片59   previousButton: "previous",  //前一张图片60 });61 62 //翻页的时候改变页码的显示63 //参数说明:"page":页码改变的事件64 //      function (data){...}: 该事件发生调用的函数65 openSeadragon.addHandler("page", function (data){66   document.getElementById("pageDiv").innerHTML ="第"+( data.page + 1 )+"张图/共2张";67 });68 </script>69 </html> 

官方demo参考地址:http://openseadragon.github.io/examples/ui-toolbar/ 

           http://openseadragon.github.io/examples/ui-binding-custom-buttons/