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                 width:0.1,             //设置宽度 9                 height:0.08,           //设置高度10                 className:"highlight", //设置overlay的类名11                 }],12     },13     ...14 });

这是在之前Demo的基础上添加的代码，“...”表示省略的代码，OpenSeadragon的简单配置和怎么显示在HTML中请参考：

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  2  3  4     
      5      6      7  8 13 14     
overlays
15     
     
16     17 47 

 

2.像素设置 overlays的位置和长宽

可以用像素值设置overlays的位置和长宽，只要将x，y换成px，py即可：

1 overlays: [{  2           id : "overlays-div",    //设置overlay的id3           px:950,                   //起始位置x4           py:220,                    //起始位置y5           width:500,              //设置宽度6           height:450,            //设置高度7           className:"highlight",  //设置overlay的类名8         }],

效果：

之所以设置了宽500 高450的像素看上去却没那么大，是因为这是按照图片放大到最大分辨率时候的像素，它会随图片缩小而缩小，以确保比例是一定的。

 

3.将overlays定义在已经定义的div中

上面的例子是定义一个id没有被创建的overlays，这样会自动创建一个新的overlays，例如上图的红框。

我们也可以指定一个已经被定义的div为overlays，这样做的好处是，我们可以往overlays里面添加文字、图片等所有HTML里的内容，然后再将其放入整个图片框viewer中。

核心代码：

1  2     
overlays
 3     
     
 4     
     
       5         随便百度一张图片作为overlays 6         
       8     
     
 9     10 

 

4.使用addOverlay函数和removeOverlay函数实现overlay的创建与销毁

OpenSeadragon给我们提供了内置函数对overlay进行操作。

以下用一个外部按钮按下，就显示overlay，再次按下就销毁overlay的例子来说明：

按下“显示overlays”前：

按下“显示overlays”后：

再次按下“销毁overlays后”图片消失。

核心代码就是对addOverlay和removeOverlay的调用，以下是这个demo的完整代码：

1  2  3  4     
      5      6      7  8  9     
按钮操作overlays的创建与销毁
10     显示overlays11     
     
12     13 57 

官方demo参考：