学习OpenSeadragon之三 (覆盖层Overlayer的使用)
Overlayer（覆盖层）是一个很重要的机制，它可以在可缩放图片上显示额外的信息。
1.简单应用
以下是我做出的一个小例子：
看这小老鼠头部的红色框内的部分就是一个分离出来的overlay。
介绍一下overlays：这是一个对象数组，定义了显示框viewer中固定的overlays层。overlays层通过这个选项来添加，之后这个块就从OpenSeadragon中去除了。
既然是数组，当然我们就可以定义很多个overlay。
下面结合这个Demo的核心代码来讲解:
var openSeadragon = new OpenSeadragon({
...
//定义覆盖层overlays
overlays: [{
id : "overlays-div", //设置overlay的id
x:0.6, //起始位置x
y:0.16, //起始位置y
width:0.1, //设置宽度
height:0.08, //设置高度
className:"highlight", //设置overlay的类名
}],
},
...
});
这是在之前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里修改（官方是这么说的）,以下是这个例子的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OpenSeadragon_Demo1</title>
<script src="openseadragon.min.js"></script>
</head>
<style>
#overlays-div{
border: 1px solid red;
}
</style>
<body>
<h1>overlays</h1>
<div id="openSeadragon1" style="width:800px; height:350px; border:1px solid blue;"></div>
</body>
<script type="text/javascript">
var openSeadragon = new OpenSeadragon({
id: "openSeadragon1", //指定显示的div
prefixUrl: "./images/", //库中按钮等图片所在文件夹
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2009",//指令集
Url: "./ccc_files/", //图片库地址
Overlap: "1", //相邻图片重合的像素
TileSize: "256", //单个切片（正方形）的边长
Format : "jpg", //切片格式
//图片总大小
Size:{
Height: "1181",
Width: "2953",
},
},
//定义覆盖层overlays
overlays: [{
id : "overlays-div", //设置overlay的id
x:0.6, //起始位置x
y:0.16, //起始位置y
width:0.1, //设置宽度
height:0.08, //设置高度
className:"highlight", //设置overlay的类名
}],
},
//debugMode : true, //开启调试模式
});
</script>
</html>
2.像素设置 overlays的位置和长宽
可以用像素值设置overlays的位置和长宽，只要将x，y换成px，py即可：
overlays: [{
id : "overlays-div", //设置overlay的id
px:950, //起始位置x
py:220, //起始位置y
width:500, //设置宽度
height:450, //设置高度
className:"highlight", //设置overlay的类名
}],
效果：
之所以设置了宽500 高450的像素看上去却没那么大，是因为这是按照图片放大到最大分辨率时候的像素，它会随图片缩小而缩小，以确保比例是一定的。
3.将overlays定义在已经定义的div中
上面的例子是定义一个id没有被创建的overlays，这样会自动创建一个新的overlays，例如上图的红框。
我们也可以指定一个已经被定义的div为overlays，这样做的好处是，我们可以往overlays里面添加文字、图片等所有HTML里的内容，然后再将其放入整个图片框viewer中。
核心代码：
<body>
<h1>overlays</h1>
<div id="openSeadragon1" style="width:800px; height:350px; border:1px solid blue;"></div>
<div id="overlays-div" class="overlays" >
随便百度一张图片作为overlays
<img src="http://e.hiphotos.baidu.com/image/pic/item/21a4462309f790528c5b54390ff3d7ca7bcbd574.jpg"
alt="">
</div>
</body>
<script>
var openSeadragon = new OpenSeadragon({
...
overlays: [{
id : "overlays-div", //设置overlay的id
px:2300, //起始位置x
py:0, //起始位置y
width:800, //设置宽度
height:1181, //设置高度
className:"overlays", //设置overlay的类名
}],
},
...
});
</script>
4.使用addOverlay函数和removeOverlay函数实现overlay的创建与销毁
OpenSeadragon给我们提供了内置函数对overlay进行操作。
以下用一个外部按钮按下，就显示overlay，再次按下就销毁overlay的例子来说明：
按下“显示overlays”前：
按下“显示overlays”后：
再次按下“销毁overlays后”图片消失。
核心代码就是对addOverlay和removeOverlay的调用，以下是这个demo的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮操作overlays的创建与销毁</title>
<script src="openseadragon.min.js"></script>
</head>
<body>
<h1>按钮操作overlays的创建与销毁</h1>
<button id="button">显示overlays</button>
<div id="openSeadragon1" style="width:800px; height:350px; border:1px solid blue;"></div>
</body>
<script type="text/javascript">
var openSeadragon = new OpenSeadragon({
id: "openSeadragon1", //指定显示的div
prefixUrl: "./images/", //库中按钮等图片所在文件夹
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2009",//指令集
Url: "./ccc_files/", //图片库地址
Overlap: "1", //相邻图片重合的像素
TileSize: "256", //单个切片（正方形）的边长
Format : "jpg", //切片格式
//图片总大小
Size:{
Height: "1181",
Width: "2953",
},
},
},
}); var overlay = false; //overlay标记位，存在为true，不存在为false
var btn = document.getElementById('button'); //获取按钮DOM对象
btn.onclick = //按下按钮，执行创建或者销毁overlays
function() {
if (overlay) {
openSeadragon.removeOverlay("overlays-div"); //根据id，销毁移除overlay
//改变按钮提示状态
btn.innerHTML = "显示overlays";
} else {
var elt = document.createElement("div"); //创建一个div对象作为overlays
elt.id = "overlays-div"; //设置div对象的id
//执行添加overlay的函数
openSeadragon.addOverlay({
element: elt, //overlay的元素名称（上面创建的div）
location: new OpenSeadragon.Rect(0.75, 0.1, 0.2, 0.2), //设置overlay在view上的位置
});
//为overlays添加图片
elt.innerHTML = "<img src='http://e.hiphotos.baidu.com/image/pic/item/21a4462309f790528c5b54390ff3d7ca7bcbd574.jpg'>";
//改变按钮提示状态
btn.innerHTML = "销毁overlays";
}
overlay = !overlay; //标记位取反
};
</script>
</html>
官方demo参考：
http://openseadragon.github.io/examples/ui-overlays/
学习OpenSeadragon之三 (覆盖层Overlayer的使用)的更多相关文章
- Java学习-029-JSON 之三 -- 模仿 cssSelector 封装读取 JSON 数据方法
前文简单介绍了如何通过 json-20141113.jar 提供的功能获取 JSON 的数据,敬请参阅:Java学习-028-JSON 之二 -- 数据读取. 了解学习过 JQuery 的朋友都知道, ...
- 学习OpenSeadragon之五(工具条toolbar与自定义按钮)
OpenSeadragon简介:学习OpenSeadragon之一(一个显示多层图片的开源JS库) 一.工具条toolbar设置 OpenSeadragon为我们提供了现成的工具条toolBar,工具 ...
- 学习OpenSeadragon之四(导航视图)
OpenSeadragon介绍以及上手:学习OpenSeadragon之一 OpenSeadragon主要用于地图.医学图像等需要放大缩小分层显示的图像显示. 1.简单例子 导航视图就是在一个小框中显 ...
- Lua和C++交互 学习记录之三：全局值交互
主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3 参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 1 ...
- CAN总线学习系列之三——CAN控制器的选择
CAN总线学习系列之三——CAN控制器的选择 在进行CAN总线开发前,首先要选择好CAN总线控制器.下面就比较一些控制器的特点. 一些主要的CAN总线器件产品 制造商 产品型号 器件功能及特点 Int ...
- SQL Sever 学习系列之三
SQL Sever 学习系列之三 SQL Server 学习系列之一(薪酬方案+基础) SQL Server 学习系列之二(日期格式问题) 五.经理今天刚谈到with的用法(with的 ...
- 学习OpenSeadragon之一（一个显示多层图片的开源JS库）
OpenSeadragon是一个可以显示多层图片(可放大缩小)的Web库,基于JavaScript,支持桌面和手机. 由于我项目需要,却没有找到任何中文教程,因此在官网上一边学习,一边总结于此. 官网 ...
- bootstrap学习笔记之三（组件的使用）
bootstrap组件需要引入bootstrap.js才行,当然要引入bootstrap.js首先得引入JQuery. 一.下拉菜单 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另 ...
- Gradle学习系列之三——读懂Gradle语法
在本系列的上篇文章中,我们讲到了创建Task的多种方法,在本篇文章中,我们将学习如何读懂Gradle. 请通过以下方式下载本系列文章的Github示例代码: git clone https://git ...
随机推荐
- 【HDOJ】5154 Harry and Magical Computer
拓扑排序. /* 5154 */ #include <iostream> #include <cstdio> #include <cstring> #include ...
- convex optimization
##凸优化总结所有这些想法基本是来自于书籍[convex optimization](http://book.douban.com/subject/1888111/),主要包括凸优化的基本理论,主要的 ...
- 微软 Microsoft
微软(Microsoft Corporation) (NASDAQ:MSFT,港交所:4338),是一家基于美国的跨国电脑科技公司,是世界PC(Personal Computer,个人计算机)机软件开 ...
- 深度优先搜索-linux上浅显易懂的例子
上次看啊哈算法中的深度优先搜索,自己用的是linux(linux粉,windows黑,嘿嘿),字符界面,为了强化对这个的理解,就在linux上对这个例子的代码做了一点修改可以很清楚的看到整个搜索过程, ...
- N - Marriage Match II - HDU 3081（最大流）
题目大意:有一些男孩和女孩玩一个游戏,每个女孩都可以挑一个男孩来进行这个游戏(所有人都要参加),女孩只会挑选她喜欢的男孩,并且她们认为她们朋友喜欢的男孩她们也是喜欢的(朋友的男朋友也是我的男朋友??? ...
- java操作xml方式比较与详解(DOM、SAX、JDOM、DOM4J)
java中四种操作(DOM.SAX.JDOM.DOM4J)xml方式的比较与详解 1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准. ...
- windows 编程—— 学习指导
这里有一份很好的资源,被制作成chm文件的<Windows 程序设计>,包含了中文版和英文版,还有全书源代码,虽然不知道是谁出版的,但是感觉对Windows编程新手来说还是很不错的.关键还 ...
- BootStrap--Tables（表格） MVC中不刷新做增，删，改（C#）
自带的Tables会有自动分页,搜索等一些动能,很方便,唯一的不足就是添加,修改,删除数据需要刷新页面,并不能静态. 下面说的是如何不刷新页面(Ajax)去执行增,删,改操作. 需要用到的样式,JS库 ...
- 通过jdbc取得数据库表结构信息
做制作开发平台时,首要的一点是如何取得数据库表结构信息.一般通用的做法就是通过JDBC中的ResultSetMetaData类来进行操作,当你取得了数据库表结构信息后,比如说表的每个字段名称,字段类型 ...
- [LeetCode]Container With Most Water, 解题报告
前言 难怪LeetCode OJ在找工作时被很多人推荐,发现了这道最大蓄水题目就是美团的笔试最后一道题,当时我霸笔只有着一道题目没有答出来,因此也就没有获得面试机会,可惜了 题目 Given n no ...