学习OpenSeadragon之三 (覆盖层Overlayer的使用)
Overlayer（覆蓋層）是一個很重要的機制，它可以在可縮放圖片上顯示額外的信息。
1.簡單應用
以下是我做出的一個小例子：
看這小老鼠頭部的紅色框內的部分就是一個分離出來的overlay。
介紹一下overlays：這是一個對象數組，定義了顯示框viewer中固定的overlays層。overlays層通過這個選項來添加，之后這個塊就從OpenSeadragon中去除了。
既然是數組，當然我們就可以定義很多個overlay。
下面結合這個Demo的核心代碼來講解:
1 var openSeadragon = new OpenSeadragon({
2 ...
3 //定義覆蓋層overlays
4 overlays: [{
5 id : "overlays-div", //設置overlay的id
6 x:0.6, //起始位置x
7 y:0.16, //起始位置y
8 0.1, //設置寬度
9 height:0.08, //設置高度
10 className:"highlight", //設置overlay的類名
11 }],
12 },
13 ...
14 });
這是在之前Demo的基礎上添加的代碼，“...”表示省略的代碼，OpenSeadragon的簡單配置和怎么顯示在HTML中請參考：學習OpenSeadragon之一（一個顯示多層圖片的開源JS庫）
overlays:[{...}]會生成一個新的overlays對象，id和className分別是這個對象的id名和類名，我們可以通過這兩個參數來找到訪問它并且設置其樣式。
x、y是overlays的左上角起點位置，這是相對于整個圖片大小比例來說的，比例x=0 y=0就是整幅圖片左上角。
不過經過我測試(開啟調試模式比較)，y的值是相對于寬度的比例來說的，例如整幅圖的 寬=100 高=50, x=0.1 y=0.1,那么起點位置為(100*0.1,100*0.1)=(10,10),跟整幅圖高度沒有關系。
width和height分別是overlays的寬度和高度，也是相對于整幅圖像寬的比例。
如果僅僅做以上修改，我們發現圖像沒有任何改變，這是因為我們僅僅得到了overlays對象卻沒有修改其樣式。
因為修改overlays對象樣式必須在head的style里修改（官方是這么說的）,以下是這個例子的完整代碼：
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 <style>
9 #overlays-div{
10 border: 1px solid red;
11 }
12 </style>
13 <body>
14 <h1>overlays</h1>
15 <div id="openSeadragon1"></div>
16 </body>
17 <script type="text/javascript">
18 var openSeadragon = new OpenSeadragon({
19 id: "openSeadragon1", //指定顯示的div
20 prefixUrl: "./images/", //庫中按鈕等圖片所在文件夾
21 tileSources: {
22 Image: {
23 xmlns: "http://schemas.microsoft.com/deepzoom/2009",//指令集
24 Url: "./ccc_files/", //圖片庫地址
25 Overlap: "1", //相鄰圖片重合的像素
26 TileSize: "256", //單個切片（正方形）的邊長
27 Format : "jpg", //切片格式
28 //圖片總大小
29 Size:{
30 Height: "1181",
31 Width: "2953",
32 },
33 },
34 //定義覆蓋層overlays
35 overlays: [{
36 id : "overlays-div", //設置overlay的id
37 x:0.6, //起始位置x
38 y:0.16, //起始位置y
39 0.1, //設置寬度
40 height:0.08, //設置高度
41 className:"highlight", //設置overlay的類名
42 }],
43 },
44 //debugMode : true, //開啟調試模式
45 });
46 </script>
47 </html>
2.像素設置overlays的位置和長寬
可以用像素值設置overlays的位置和長寬，只要將x，y換成px，py即可：
1 overlays: [{
2 id : "overlays-div", //設置overlay的id
3 px:950, //起始位置x
4 py:220, //起始位置y
5 500, //設置寬度
6 height:450, //設置高度
7 className:"highlight", //設置overlay的類名
8 }],
效果：
之所以設置了寬500 高450的像素看上去卻沒那么大，是因為這是按照圖片放大到最大分辨率時候的像素，它會隨圖片縮小而縮小，以確保比例是一定的。
3.將overlays定義在已經定義的div中
上面的例子是定義一個id沒有被創建的overlays，這樣會自動創建一個新的overlays，例如上圖的紅框。
我們也可以指定一個已經被定義的div為overlays，這樣做的好處是，我們可以往overlays里面添加文字、圖片等所有HTML里的內容，然后再將其放入整個圖片框viewer中。
核心代碼：
1 <body>
2 <h1>overlays</h1>
3 <div id="openSeadragon1"></div>
4 <div id="overlays-div" class="overlays" >
5 隨便百度一張圖片作為overlays
6 <img src="http://e.hiphotos.baidu.com/image/pic/item/21a4462309f790528c5b54390ff3d7ca7bcbd574.jpg"
7 alt="">
8 </div>
9 </body>
10 <script>
11 var openSeadragon = new OpenSeadragon({
12 ...
13 overlays: [{
14 id : "overlays-div", //設置overlay的id
15 px:2300, //起始位置x
16 py:0, //起始位置y
17 800, //設置寬度
18 height:1181, //設置高度
19 className:"overlays", //設置overlay的類名
20 }],
21 },
22 ...
23 });
24 </script>
4.使用addOverlay函數和removeOverlay函數實現overlay的創建與銷毀
OpenSeadragon給我們提供了內置函數對overlay進行操作。
以下用一個外部按鈕按下，就顯示overlay，再次按下就銷毀overlay的例子來說明：
按下“顯示overlays”前：
按下“顯示overlays”后：
再次按下“銷毀overlays后”圖片消失。
核心代碼就是對addOverlay和removeOverlay的調用，以下是這個demo的完整代碼：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>按鈕操作overlays的創建與銷毀</title>
6 <script src="openseadragon.min.js"></script>
7 </head>
8 <body>
9 <h1>按鈕操作overlays的創建與銷毀</h1>
10 <button id="button">顯示overlays</button>
11 <div id="openSeadragon1"></div>
12 </body>
13 <script type="text/javascript">
14 var openSeadragon = new OpenSeadragon({
15 id: "openSeadragon1", //指定顯示的div
16 prefixUrl: "./images/", //庫中按鈕等圖片所在文件夾
17 tileSources: {
18 Image: {
19 xmlns: "http://schemas.microsoft.com/deepzoom/2009",//指令集
20 Url: "./ccc_files/", //圖片庫地址
21 Overlap: "1", //相鄰圖片重合的像素
22 TileSize: "256", //單個切片（正方形）的邊長
23 Format : "jpg", //切片格式
24 //圖片總大小
25 Size:{
26 Height: "1181",
27 Width: "2953",
28 },
29 },
30 },
31 });
32
33 var overlay = false; //overlay標記位，存在為true，不存在為false
34 var btn = document.getElementById('button'); //獲取按鈕DOM對象
35 btn.onclick = //按下按鈕，執行創建或者銷毀overlays
36 function() {
37 if (overlay) {
38 openSeadragon.removeOverlay("overlays-div"); //根據id，銷毀移除overlay
39 //改變按鈕提示狀態
40 btn.innerHTML = "顯示overlays";
41 } else {
42 var elt = document.createElement("div"); //創建一個div對象作為overlays
43 elt.id = "overlays-div"; //設置div對象的id
44 //執行添加overlay的函數
45 openSeadragon.addOverlay({
46 element: elt, //overlay的元素名稱（上面創建的div）
47 location: new OpenSeadragon.Rect(0.75, 0.1, 0.2, 0.2), //設置overlay在view上的位置
48 });
49 //為overlays添加圖片
50 elt.innerHTML = "<img src='http://e.hiphotos.baidu.com/image/pic/item/21a4462309f790528c5b54390ff3d7ca7bcbd574.jpg'>";
51 //改變按鈕提示狀態
52 btn.innerHTML = "銷毀overlays";
53 }
54 overlay = !overlay; //標記位取反
55 };
56 </script>
57 </html>
官方demo參考：
http://openseadragon.github.io/examples/ui-overlays/
總結
以上是生活随笔為你收集整理的学习OpenSeadragon之三 (覆盖层Overlayer的使用)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大圆脸适合哪种发型（圆脸女生适合什么短发
- 下一篇： 怎么创建具有真实纹理的CG场景岩石？