学习OpenSeadragon之5(工具条toolbar与自定义按钮)

学习OpenSeadragon之五(工具条toolbar与自定义按钮)

OpenSeadragon简介：学习OpenSeadragon之一（一个显示多层图片的开源JS库）

一、工具条toolbar设置

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

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

学习OpenSeadragon之5(工具条toolbar与自定义按钮)

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

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

二、自定义按钮风格

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

学习OpenSeadragon之5(工具条toolbar与自定义按钮)

只需要设置按钮的值为对应元素的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中相应的元素就会具有相应按钮的功能。

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

学习OpenSeadragon之5(工具条toolbar与自定义按钮)

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

附上这个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" style="width:800px; height:30px;">
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 style="float:left; width:280px;">
17             <button id="previous">前一张图</button>
18             <button id="next">下一张图</button>
19             <div id="pageDiv" style="float:right;">第1张图/共2张</div>
20         </div>
21     </div>
22     <div id="openSeadragon1" style="width:800px; height:600px; border:1px solid blue"></div>
23 </body>
24 <script type="text/javascript">
25 var openSeadragon = OpenSeadragon({
26     id:  "openSeadragon1",  
27     prefixUrl: "./images/", //库图片位置
28     //图片来源
29     tileSources: [{ 
30         Image: {
31             xmlns:  "http://schemas.microsoft.com/deepzoom/2009",
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             xmlns:  "http://schemas.microsoft.com/deepzoom/2009",
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/

学习OpenSeadragon之5(工具条toolbar与自定义按钮)

相关推荐