文章目录
OpenSeadragon 学习指南
1、OpenSeadragon 初体验
1.1 Deep Zoom
在进行高分辨率图像展示时，由于单张图像体积过大，会对计算机性能造成较大的负担。为了减少客户端的负担，改善用户体验，我们可以采用 Deep Zoom 技术。
Deep Zoom 提供了交互式浏览高分辨力图像的能力。用户可以快速地缩放图像，并且不会影响应用程序的性能。通过提供多分辨率和使用 Spring Animations， Deep Zoom可以顺滑地加载和平移图像。
我们将同一图像的不同分辨率下或者说不同尺寸下的图像组合称作 图像金字塔 （ Image Pyramid ），不同尺寸的图像对应的就是图像金字塔上相应的层级（ Level ）。图像金字塔的每个层级的“地面”是由面积相同的“瓷砖”铺就，这些“瓷砖”我们称之为瓦片（ Tile ）。图像金字塔与瓦片图的对应关系如下图：
了解了 Deep Zoom 图像的基本概念之后，我们就可以尝试生成 Deep Zoom 图像。我们可以使用 Deep Zoom Composer 或 OpenSlide 生成 Deep Zoom 图像文件。以下我们将讲述如何使用两种工具来生成 Deep Zoom 图像。
1.1.1 Deep Zoom Composer
Deep Zoom Composer 是 MicroSoft Sliverlight 团队基于 Deep Zoom 技术创建的一个工具。使用 Deep Zoom Composer 我们可以很方便的创建 Deep Zoom 图像。我们可以通过以下地址下载 Deep Zoom Composer：
https://www.microsoft.com/en-us/download/details.aspx?id=24819
在安装 Deep Zoom Composer 前，如果我们之前安装过旧版本的DZC，需要先将旧版本的DZC手动卸载，然后再安装DZC。
安装后，点击图标打开DZC。待启动画面完成后，便可进入软件操作界面。进入界面之后点击 “Project”选项卡，点击 “New Project…”，弹出新建工程窗口，键入工程名称（Name），选择储存位置（Location），即新建创建 Deep Zoom 图像的工程文件。
进入工程文件，选择“Import”选项卡，点击右侧 “Add image…”按钮， 选择目标文件，即可导入文件。当然你也可以将目标文件直接拖入窗口进行导入。DZC支持 .tiff、 .tif、 .jpg、 .png 、 bmp 等格式的图像。
选择“Compose”选项卡进行排版。可以将要拼合的图像在此拼合为单张大图，当然也可以将单张大图放入操作面板，等待下一步生成 Deep Zoom 图像。
排版完成之后就可以选择“Export”选项卡进行导出。在右侧“Settings”窗口内我们可以进行相关参数配置。为了配合以后在 OpenSeadragon 中进行预览使用，我们将“Output type”设置为“Seadragon Ajax”。然后键入导出文件夹的名称（Name），选择导出文件的位置，等待文件导出。
由于 Seadragon 已经开源成为 OpenSeadragon，而DZC依旧采用老版本的 Seadragon，并且从已经关闭的CDN地址获取相关类库，所以“Preview in Browser”选项已经无法对图像的预览进行预览。不过在稍后我们将一起在 OpenSeadragon 中进行简单的开发已实现对图像。现在我们先点击“View Image Folder”对 Deep Zoom 图像的相关文件夹结构进项初步了解。文件目录结构如下：
GeneratedImages
|-- deep_output_files
| |-- 0
| | |-- 0_0.jpg
| |
| |-- 1
| | |-- 0_0.jpg
| |
| |-- …
| |-- 15
| | |-- 0_0.jpg
| | |-- 0_1.jpg
| | |-- 0_… .jpg
| | |-- 1_0.jpg
| | |-- …_… .jpg
| | |-- 76_19.jpg
|
|-- dez_output.xml
|-- scene.xml
|-- SparseImageSceneGraph.xml
deep_output_files 文件夹中储存的就是图像金字塔及瓦片图。其中 0~15 这些文件夹就是图形金字塔各层的图像分割后各层瓦片图的集合。
dez_output.xml 文件内部储存的是 Deep Zoom 图像的相关信息，根据这些信息 OpenSeadragon 或其它 Deep Zoom 阅图工具可进行相应的图像加载。其内部 xml 文本如下：
<?xml version="1.0" encoding="utf-8"?>
<Image
TileSize="256"
Overlap="1"
Format="jpg"
ServerFormat="Default"
xmlns="http://schemas.microsoft.com/deepzoom/2009"
>
<Size Width="19502" Height="5069" />
</Image>
剩下两个 xml 文件记录了一些相关文件生成信息和工程文件信息，由于在相关应用中没有具体应用，所以在这里就不再进行赘述。
1.1.2 OpenSlide
我们可以使用 OpenSlide 读取一些常见的电子切片（ virtual slides ）生成 Deep Zoom 图像。OpenSlide 是一个基于 GUN 协议由 C 语言编写的一个开源工具库。我们在进行开发时使用 C、 Java、 Python 等语言调用该类库可以轻松的实现一个电子切片图像在线预览服务器。OpenSlide 对于常见的病理切片扫描仪生成的电子切片具有较好的支持。根据其官网介绍，OpenSlide 支持以下扫描仪厂商相关电子切片文件格式：
Aperio (.svs, .tif)
Hamamatsu (.vms, .vmu, .ndpi)
Leica (.scn)
MIRAX (.mrxs)
Philips (.tiff)
Sakura (.svslide)
Trestle (.tif)
Ventana (.bif, .tif)
Generic tiled TIFF (.tif)
官网地址：
1.2 OpenSeadragon 起步
Openseadragon 是一款基于 Javascript 的浏览器端 Deep Zoom 图像在线预览工具，它可以同时支持桌面端和移动端。由于其基于 New BSD 开源协议，所以我们可以轻松的使用它来构建我们自己的 Deep Zoom 图像预览工具。我们可以登录 OpenSeadragon 官网来获取它的相关信息。
接下来让我们一起编写一个简单的工具来预览之前使用DZC生成的 Deep Zoom 图像。在开始工作之前，我们需要下载 OpenSeadragon 的相关类库。
https://github.com/openseadragon/openseadragon/releases/download/v2.4.2/openseadragon-bin-2.4.2.zip
接下来我们可以创建项目目录，项目目录的的基本路径如下：
OpenSeadragonDemo
|---- index.html
|---- GeneratedImages
| |-- …
|
|---- images
| |-- …
|
|---- js
|-- openseadragon.js
|-- openseadragon.js.map
我们将之前生成的 Deep Zoom 图像文件目录拷贝到项目根路径下，然后解压之前下载的 OpenSeadragon 工具库，将 images 目录拷贝到项目根目录，将 openseadragon.js 和 openseadragon.js.map 拷贝到 js 目录下。之后便可以编辑 index.html 文件：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenSeadragon Demo</title>
<script type="text/javascript" src="./js/openseadragon.js"></script>
<style type="text/css">
body {
position: absolute;
height: 100%;
width: 100%;
margin: 0;
}
#openseadragon-viewer {
width: 100%;
height: 100%;
}
</style>
</head>
<body style="position: absolute; width: 100%;height: 100%;">
<div id="openseadragon-viewer"></div>
<script type="text/javascript">
OpenSeadragon({
id: "openseadragon-viewer",
prefixUrl: "./images/",
tileSources: "./GeneratedImages/dzc_output.xml"
})
</script>
</body>
</html>
之后，我们将项目目录放至静态文件服务器，便可通过浏览器对之前DZC生成的 Deep Zoom 图像进行在线预览。至此，我们已经编写出了一个简单的 Deep Zoom 阅览器。
2、OpenSeadragon 参数配置
上一章我们已经初步了解了 Deep Zoom 图像的相关知识。并且基于 OpenSeadragon 编写了一个简单的阅图工具。本章我们将详细讲解 OpenSeadragon 的一些常用配置参数。
2.1 绑定Dom对象
在 OpenSeadragon 对象渲染图像预览窗口时，需要指定图像窗口需要插入的 Dom 对象。OpenSeadragon 为我们提两种绑定 Dom 对象的方式。第一种是提供要插入的 Dom 对象的 id OpenSeadragon 根据 Dom 对象的 id 自动查找相应的 Dom 对象，采用此方式时我们需要配置参数 “id”为相应 Dom 的 id。第二种是直接提供要插入的 Dom 对象，采用此方法时我们需要配置参数“element”为相应 Dom 对象。在开发过程中，我们可以从“id”和“element”参数任选一个参数进行配置。
根据 id 绑定 Dom 对象：
OpenSeadragon({
id: "openseadragon-viewer",
prefixUrl: "./images/",
tileSources: "./GeneratedImages/dzc_output.xml"
})
直接绑定 Dom 对象：
OpenSeadragon({
element: document.getElementById("openseadragon-viewer"),
prefixUrl: "./images/",
tileSources: "./GeneratedImages/dzc_output.xml"
})
2.2 配置图像源参数
在 OpenSeadragon 中显示 Deep Zoom 图像时，我们需要将 Deep Zoom 图像的相关参数配置到 tileSources 参数中。tileSources 参数支持字符串、对象、函数和数组四种类型参数进行配置。
所谓字符串类型，就是上述 Demo 中，Deep Zoom 图像文件目录中储存图像信息的 xml 文件的路径。将其配置到 tileSources 参数下，OpenSeadragon 就可以显示相关图像。在实际使用中我们如果通过 xml 文件配置图像源参数时也可以将 xml 文件路径配置到“xmlPath”参数下且无需再对 tileSources 参数再进行配置。
我们也可以通过配置 Image 对象进行配置：
OpenSeadragon({
id: "openseadragon-viewer",
prefixUrl: "./images/",
tileSources: {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008", // 命名空间
Url: "./GeneratedImages/dzc_output_files/", // 瓦片图加载路径
Overlap: "1", // 瓦片图间重叠像素数
TileSize: "256", // 单瓦片尺寸，为瓦片图实际尺寸减去 overlap 像素数。
Format: "jpg", // 瓦片图格式（文件后缀）
Size: { // 实际图像（大图）尺寸
Width: "19502", // 图像宽
Height: "5069" // 图像高
}
}
}
})
我们需要先将 Image 对象配置到 tileSources 对象内部。Image 对象内个参数释意如上所示。
当我们设置多张图像的图象源时，可以设置“sequenceMode”参数为 true 或 false，来使图象源分组加载或者分层一次加载。
由于函数和数组在之前的实际应用中很少涉及，所以便不在此展开综述，如果想详细了解，可阅读 Openseadragon 官方接口文档。
2.3 配置覆盖图层
通过配置 overlays 属性，我们可以为图像添加覆盖图层，overlays 支持数组格式的数据，我们需要将 overlay 对象配置到数组中：
OpenSeadragon({
id: "openseadragon-viewer",
prefixUrl: "./images/",
tileSources: "./GeneratedImages/dzc_output.xml",
overlays: [
{
id: "element-overlay",
x: 0,
y: 0,
width: 1,
height: 0.5,
}
]
})
overlay 对象中我们可以配置以下参数：
id：覆盖图层的 DOM 元素 id，字符串类型，如果该 DOM 元素不存在那么创建该 DOM 元素。
x：覆盖图层在图像水平方向上的位置，与参数 y 成对出现，数字类型，单位 1 为图像宽度。
y：覆盖图层在图像垂直方向上的位置，与参数 x 成对出现，数字类型，单位 1 为图像宽度。
px：覆盖图层在图像水平方向上的位置，与参数 py 成对出现，数字类型，单位 1 为图像原始大小下的像素 1，随图像缩放，设置该参数时不能设置参数 x.
py：覆盖图层在图像垂直方向上的位置，与参数 px 成对出现，数字类型，单位 1 为图像原始大小下的像素 1，随图像缩放，设置该参数时不能设置参数 y.
width：覆盖图层的宽度，数字类型，当设置 x 参数时单位 1 为图像宽度并随图像缩放，当设置 px 参数时单位 1 为图像原始大小下的像素 1 并随图像缩放，未设置位置时单位 1 为图像宽度并随图像缩放。未设置时为元素实际宽度并不随图像缩放。
height：覆盖图层的高度，数字类型，当设置 y 参数时单位 1 为图像宽度并随图像缩放，当设置 py 参数时单位 1 为图像原始大小下的像素 1 并随图像缩放，未设置位置时单位 1 为图像宽度并随图像缩放。未设置时为元素实际高度并不随图像缩放。
className：为覆盖图层添加 class，参数为字符串或字符串数组。
placement：覆盖图层相对图像位置，未设置覆盖图层位置时设置，未设置时为默认参数TOP_LEFT，合法值有 CENTER, TOP_LEFT, TOP, TOP_RIGHT, RIGHT, BOTTOM_RIGHT, BOTTOM，BOTTOM_LEFT, LEFT.
2.4 配置基础导航栏控件
OpenSeadragon 提供的有内置导航栏控件，通过配置“showNavigationControl”可以控制默认导航栏控件的显示隐藏。默认显示的导航栏控件有放大（zoomIn）、缩小（zoomOut）、初始化（home）、全屏显示（fullpage）等导航栏控件除此之外还有左旋（rotateleft）、右旋（rotateright）、翻转（flip）。当我们设置 “sequenceMode”为 true 时可以使用上一张（previous）和下一张（next）组件。
showNavigationControl：是否渲染基础导航栏控件，参数为布尔类型，默认为 true.
navigationControlAnchor：导航栏控件组件的位置，参数可选为 NONE, TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, ABSOLUTE, 默认参数为 TOP_LEFT.
autoHideControls：不使用时自动隐藏导航栏控件，参数为布尔类型，默认为 true.
showZoomControl：放大和缩小控件的显示与隐藏，参数为布尔类型，默认值为 true.
showHomeControl：初始化图像大小控件的显示与隐藏，参数为布尔类型，默认值为 true.
showFullPageControl：全屏控件的显示与隐藏，参数为布尔类型，默认值为 true.
showRotationControl：左旋和右旋控件的显示与隐藏，参数为布尔类型，默认值为 false.
showFlipControl：翻转组件的显示与隐藏，参数为布尔类型，默认值为 false.
showSequenceControl：上一张和下一张组件的显示与隐藏，参数为布尔类型，默认值为 false, 当设置 sequenceMode 为 true 时 默认值为 true.
通过配置“prefixUrl”路径可以设置这些导航栏控件显示的图标，例如在服务器根目录下有“/images”路径储存了相关组件的图标，我们可以配置“/image”路径到该目录下，如果我们配置的图标命名与默认命名不同的话，我们可以通过配置“navImages”将之前配置的 “prefixUrl” 路径下的自定义图标与相应导航栏控件做绑定，默认的组件分为 “REST”、“GROUP”、“HOVER”、“DOWN”几种状态我们需要将相关图标与相应状态绑定才能正常显示。
在正常使用的过程中我们很少会应用基础的导航栏控件，更多时候我们会使用自定义工具栏，所以我们经常通过将 “showNavigationControl” 参数设置为 false 隐藏基础控件。
2.5 设置缩放倍率极值
当图像缩小到一定倍率时，用户将看不清图像，同时放大到一定倍率时图像将马赛克化，为了提高用户体验，我们可以设置用户可以最大放大的倍率和最小缩放的倍率。
通过设置 minZoomLevel 可以设置用户最小缩小的倍率，为数字类型。
通过设置 maxZoomLevel 可以设置用户最大放大的倍率，为数字类型。
通过设置 minZoomImageRatio 可以设置用户最小能够将图像缩小为可视区域的宽度或高度的多少倍，为数字类型，默认为 0.9.
通过设置 maxZoomPixelRatio 可以设置用户最大能够将图像放大为最大图像像素宽高的多少倍，为数字类型，默认为1.1.
通过设置 defaultZoomLevel 可以设置首次加载时图像的缩放倍率，为数字类型，默认为 0。当值为 0 时，图像在可视区域内宽高自适应全图显示。
2.6 设置每次操作图像缩放倍率
在用户操作时，可通过“+”、“-”，鼠标点击、鼠标滚轮滚动等操作对图像进行缩放，我们可以通过配置相关参数控制用户每次操作图像的缩放倍率。
zoomPerClick：每次鼠标点击事件图像的缩放倍率，为数字类型，默认为 2.0，设置为 1 时表示禁止缩放。
zoomPerScroll: 每次鼠标滚轮滚动事件或按一次“+”、“-”键的缩放倍率，为数字类型，默认为 1.2，设置为 1 时表示禁止缩放。
zoomPerSecond：每次缩放动画执行的时间，单位为秒，为数字类型，默认值为 1.
2.7 设置导航视图
所谓导航视图即为图像的缩略图，我们可以在导航视图上看到当前可视区域在图像上的位置。我们可以设置相关参数显示导航视图。通过设置 “showNavigator”参数为 true 可以启用导航视图。相关设置参数如下：
navigatorId：导航视图所在容器ID，字符串类型，使用时需要在 DOM 上创建以该属性为 id 的节点，如果指定则会忽略导航视图上所有的属性，使用自定义的css。
navigatorPosition：导航视图所在位置，字符串类型，合法值为 “TOP_LEFT”，“TOP_RIGHT”， “BOTTOM_LEFT”， “BOTTOM_RIGHT”， “ABSOLUTE”等，导航所在位置 若为“ABSOLUTE”，可根据需求指定位置“navigatorTop”， “navigatorLeft”， 且会忽略下边两个属性若为其他，则会根据下边的属性或者导航的宽高确定导航的大小，默认 “TOP_RIGHT”
navigatorSizeRatio：导航视图大小与可视区域的比例，数字类型，如果设置了导航视图的大小，则忽略此属性。
navigatorMaintainSizeRatio：当可视区域改变时是否自动缩放导航视图大小，布尔类型，设置此属性时请设置 “navigatorSizeRatio”。
navigatorLeft：导航视图距离可视区域左侧位置，数字类型。
navigatorTop：导航视图距离可是区域顶部位置，数字类型。
navigatorWidth：导航视图宽度，数字类型。
navigatorHeight：导航视图高度，数字类型。
navigatorAutoResize：根据当前图像可视区域自动调整导航视图大小，布尔类型，默认值为 true，如果设置了导航视图大小请将此属性设置为 false 以提高软件性能。
navigatorAutoFade：用户停止交互之后是否自动隐藏导航视图，布尔类型。
controlsFadeDelay：停止交互多长时间后隐藏导航视图，数字类型，单位为毫秒，默认 2000 毫秒。
controlsFadeLength：导航视图淡出动画时间，数字类型，单位为毫秒，默认 1500 毫秒。
navigatorRotate：图像旋转时，导航是否同步旋转，布尔类型，默认 true.
navigatorBackground：导航视图背景颜色，字符串类型，有效参数应表示颜色，默认“#000”.
navigatorOpacity：导航视图背景透明度，数字类型，默认为 0.8.
navigatorBorderColor：导航视图边框颜色，字符串类型，有效参数应表示颜色，默认“#555”.
navigatorDisplayRegionColor：导航视图中当前可视区域图像边框颜色，字符串类型，有效参数应表示颜色，默认“#900”.
特别注意的是，当设置“navigatorId”后，导航视图将和相应的 DOM 节点绑定，默认优先使用当前 DOM 节点的 CSS 样式。
2.8 所有 OpenSeadragon 参数全解释
注：以下来源于 CSDN 吴杼恩 OpenSeadragon学习笔记 2021-02-19
由于翻译不同，不同名词可能与本教程存在一定的出入。
id:装载到的容器
element:同上（若两者同时存在，element具有最高优先级）
titleSources:图片源//详细描述请先自行参考官网，这个属性配置项比较多
prefixUrl:OpenSeadragon自带图表样式//工具所需用到图表样式路径
navImages://自定义图标，通过上诉属性映射静态资源图标
debugMode: 设置为true的时候调试模式开启，此时将会在图片上显示放大倍数、层数等信息，每一张切片的位置也会被显示。
debugGridColor: ['#000000']//debug颜色
blendTime:0 初始化白屏时间
alwaysBlend:true,//当图片缩小时，是否显示白色遮盖图片
autoHideControls:true//当鼠标不在图片上时，是否自动隐藏导航视图和缩略图
immediateRender:false//初始化渲染，是否自动选择最佳分辨率图片显示，移动端最好开启
defaultZoomLevel:0//初始化放大倍率，按home键也返回显示该放大倍数，值为0时则显示自动适应显示框(view)的倍数,默认值为0
opacity：隐藏和显示，1显示，0全部隐藏
preload:false,Default switch for loading hidden images (true loads, false blocks)//不明白
compositeOperation:'source-over', 'source-atop', 'source-in', 'source-out', 'destination-over', 'destination-atop','destination-in', 'destination-out', 'lighter', 'copy' or 'xor' //任取其一，不明白有啥作用
placeholderFillStyle:'#FF8800'//初始化时，图片未载入现实的样式，默认是白色，此属性可选的方式有 String | CanvasGradient | CanvasPattern | function
degrees:90,//图片旋转角度
flipped:true//镜像翻转
minZoomLevel:null,//最小放大倍数
maxZoomLevel:null,//最大放大倍数
homeFillsViewer:false,//使主页按钮填满查看器//没看到效果
panHorizontal：true // 水平移动约束，设为true则图片可以水平被拖动，false则不能水平移动，默认值true
panVertical：true //是否允许垂直移动
constrainDuringPan：false// 规定了图像是否能被拖拽出允许最小范围，true为不允许，false为允许 配合上面的visibilityRatio参数使用，也就是是说，例如visibilityRatio为0.3
constrainDuringPan 为true的时候,图片被拖出70%之后就不能再拖出更多了，将其设置为false的时候，图片可以被完全脱出显示框，但是松开鼠标之后，图片会自动弹回到保留30%的位置。
constrainDuringPan : true //管拖拽,true就不能拖拽了
wrapHorizontal:true,//水平复制图片，适用于圆形图片
wrapVertical:true,//垂直复制图片，使用于圆形图片
minZoomImageRatio:0.9/0-1/最小缩放倍率，窗口的百分比
maxZoomPixelRatio：1.1//最大放大倍率，窗口的百分比
smoothTileEdgesMinZoom:1.1,//放大到最大倍率后，容器的表现形式，是否为平滑过渡，还是由原图逐渐放大到容器的宽度，这个属性会影响性能，建议使用Infinity将此属性关闭，且IOS下，设置此属性无效
iOSDevice:false //设置是否运行在ios设备上，以避免一些表现形式得不同，如果确认将在ios下运行，设置为true，不确认得时候忽略此属性
autoResize:true,//设置是否自动伸缩，若容器得宽度被放到或者缩小，则图片会自动重新使用
preserveImageSizeOnResize:fasle// 设置图像是否保留原图比例大小，以确保当容器被放大或者缩小时，图片被拉伸，当上一属性为true时起作用
minScrollDeltaTime:50,//倍率切换时间，越大则倍率切换时越慢
pixelsPerWheelLine:40 //移动端滚动像素值，每次滚动移动得像素值
pixelsPerArrowPress：40 // 每按下浏览器进度条的向上或向下按钮，移动的像素值
visibilityRatio:规定了图像在显示框中最少要保留的比例，默认值0.5,范围0-1,0表示图像可以完全被移动到显示框之外，1表示，图像一点也不能被移动到显示框之外.
如果用鼠标将图片拖拽出去，图片还会自动弹回来，0.3表示图像至少要有30%在显示框之内，如果图像被拖出超过30%，松开鼠标后将会恢复到30%的图像在框内。
例如要设置图像最小保留比例为30%,关键代码为:
OpenSeadragon({
...
visibilityRatio : 0.3, //图片在框内的最小比例
...
});
imageLoaderLimit：0 //设置同时请求的图片数量，默认0允许浏览器根据浏览器策略允许并生成最大数量的图像请求。
clickTimeThreshold:300 //鼠标单击一下 多长时间内即被视为点击事件，比如长时间按住鼠标左键不放，如果超出这个时间，则不会被视为点击事件clickDistThreshold: 5 //鼠标左键落下至弹起这一段时间内，鼠标移动多少距离，将被视为一次点击事件，一般和上边的时间同时设置才会看到效果
dblClickTimeThreshold：300 //双击事件，两次单击的时间间隔为多少毫秒内，及会被视为双击事件
dblClickDistThreshold：20 //两次双击的时间内，鼠标移动多少距离内，即被视为双击事件
springStiffness:6.5, //缩放过渡效果，，值越小，则动画越趋于柔和
animationTime：5 //放大或缩小动画过渡的时间，这个值越小，过渡快
gestureSettingsMouse:{ //鼠标事件设置
scrollToZoom：true //是否禁用滚轮滚动事件
clickToZoom:true //是否禁用鼠标单击事件
dblClickToZoom:true //是否禁用双击事件,如果将此设置为true 那么应该禁用单击事件
pinchToZoom:true //禁用移动端手势缩放
flickEnabled:true // 拖动手势结束时禁用动态平移效果(轻弹)
flickMinSpeed: 5 拖动结束动态平移效果的时间
flickMomentum:5 拖动结束动态平移效果的距离
zoomToRefPoint:false //放大缩小中心点，设为false则以画布中心点缩放，true则以鼠标为中心点缩放
pinchRotate:true //可以使用手势进行旋转
}
gestureSettingsTouch：{} //触摸屏事件 同上
gestureSettingsPen：{} //笔触事件 同上
gestureSettingsUnknown：{} //未知设备 同上
zoomPerClick:8, //点击一下 放大倍率 设置为1 则代禁用单击事件 同gestureSettingsMouse.clickToZoom
zoomPerScroll:1 //滚轮放大倍率，设置为1 则代表禁用滚轮事件 同gestureSettingsMouse.scrollToZoom
zoomPerSecond:1, //结束单个缩放动画的秒数
showNavigator:true //是否显示导航缩略图
navigatorId： //导航所在容器ID 如果指定则会忽略导航上所有的属性 使用自定义的css
navigatorPosition：'TOP_LEFT'，'TOP_RIGHT'，'BOTTOM_LEFT'，'BOTTOM_RIGHT'或'ABSOLUTE' ///导航所在位置 若为ABSOLUTE，可根据需求指定位置navigatorTop，navigatorLeft， 且会忽略下边两个属性若为其他，则会根据下边的属性或者导航的宽高确定导航的大小
navigatorSizeRatio：0.2 导航的大小与整体视图的比例 ， 如果设置了导航的宽高 则忽略此属性
navigatorMaintainSizeRatio: ture 当容器大小改变时，是否自动缩放导航图的大小，此属性依赖上一属性
navigatorHeight： //指定后将会忽略上边两个属性
navigatorWidth： 同上
navigatorAutoResize:true 根据视图自动调整导航大小 若已确定导航大小，请设置为false避免每次窗口缩放的查询 可提高性能
navigatorAutoFade:false // 如果用户停止与视口交互，则淡化导航器迷你地图。设置为false将使导航器小地图始终可见。
navigatorRotate:true //图像旋转时 导航地图同时旋转
navigatorBackground：'#ffffff' //导航背景色
navigatorOpacity:0.8 //导航背景透明度
navigatorBorderColor：'' // 导航边框颜色
navigatorDisplayRegionColor： '' //导航中，当前查看区域的边框颜色
controlsFadeDelay:2000 //停止交互多少秒后，隐藏导航栏
controlsFadeLength:1500 //导航窗口淡化动画时间
maxImageCacheCount：200 //最大缓存图片数量
timeout:30000 //图片最大显示时间数，加载超出这个时间后，及被认定为加载失败
useCanvas:true // 使用Canvas绘制图像，设置false 即使浏览器支持Canvas 也不会使用Canvas
minPixelRatio:0.5 //不确定，这个值越高，则会在带宽数较低的设备上显示时，渲染出的图片质量越低，用以减少带宽消耗
mouseNavEnabled：true 是否允许用户通过鼠标或触摸 与图像交互
showNavigationControl：true //基础控件的展示与隐藏
showZoomControl:true //显示放大和缩小按钮
showHomeControl：true //显示回到主位置按钮
showFullPageControl：true //显示全屏按钮
showRotationControl:true //显示左旋转和右旋转按钮 只有在支持的浏览器上才可以正常显示
showFlipControl：true //显示镜像翻转按钮
navigationControlAnchor: 'NONE','TOP_LEFT','TOP_RIGHT','BOTTOM_LEFT','BOTTOM_RIGHT','ABSOLUTE' //控件位置
showSequenceControl:true //显示向前向后按钮
sequenceMode:true //设置为true 代表加载的是一张图片，而非一个图片合集
navPrevNextWrap：true //设置为true，上一个按钮和下一个按钮会形成循环
initialPage：0 //上一属性为true时，设置首次加载加载第几个在主屏
preserveViewport：true //猜测：如果是一个集合时，每张图像之间切换时，视窗将会被保留
preserveOverlays:true //切换图片后，仍然保留图层
showReferenceStrip:false //显示图像缩略图滚动条
collectionMode:true, //
collectionRows:10,
collectionColumns:10,
collectionLayout:,
collectionTileSize:,
collectionTileMargin:,
zoomInButton：'' //自定义放大按钮ID
zoomOutButton：'',//自定义缩小按钮ID
homeButton:'',//自定义主位置按钮ID
fullPageButton:'',//自定义全屏按钮ID
rotateLeftButton:'',//自定义左旋转按钮ID
rotateRightButton:'',//自定义右旋转按钮ID
previousButton:'',//自定义上一个按钮ID
nextButton:''//自定义下一个按钮ID
crossOriginPolicy:true, //设置为true 不允许使用跨域请求cors
//请使用titleSource，不要使用下边的
ajaxWithCredentials：true 是否为AJAX请求设置withCredentials XHR标志
loadTilesWithAjax：true //是否适用ajax请求加载切片
ajaxHeaders： ’‘ajax请求头
panHorizontal (default: true) 水平允许拖拽
panVertical (default: true) 竖直允许拖拽
wrapHorizontal (default: false) 在水平方向会连续显示，例如当图像显示到右边缘以外的时候，会把图像的左边缘跟右边缘结合，接着显示，一般用于显示地图
wrapVertical (default: false) 垂直方向连续显示
visibilityRatio (default: 0.5) 图片在显示框view中被限制的最小百分百
minPixelRatio (default: 0.5) 最小像素比，这个值越高效果，停止显示更高效果的值就约低，比如带宽低的时候可以设置在1.5，具体效果我也没完全读懂
minZoomImageRatio (default: 0.9) 最小允许的缩小比例
maxZoomPixelRatio (default: 2) 像素最大允许放大比例，如果是设置为“infinite”可以无限放大，在HTML5的canvas中用的时候,如果viewing device不可用则效果会不好
defaultZoomLevel (default: 0) 默认显示的放大倍数，页面刚打开或按home键时候的放大倍数，0则自动适应view
3、Viewer 类
在实际使用 OpenSeadragon 时，我们一般会通过创建 Viewer 类的对象来创建 OpenSeadragon 视图，Viewer 对象是我们通过代码操作 OpenSeadragon 的抓手。通过操作 Viewer 对象，我们可以实现对 OpenSeadragon 的再开发，创建我们自己的深度图像阅片软件。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenSeadragon Demo</title>
<script type="text/javascript" src="./js/openseadragon.js"></script>
<style type="text/css">
body {
position: absolute;
height: 100%;
width: 100%;
margin: 0;
}
#openseadragon-viewer {
width: 100%;
height: 100%;
}
.overlay {
background: red;
}
</style>
</head>
<body style="position: absolute; width: 100%;height: 100%;">
<div id="openseadragon-viewer">
<div id="openseadragon-navigator"></div>
</div>
<script type="text/javascript">
var viewer = new OpenSeadragon.Viewer({ // 创建 Viewer 对象。
id: "openseadragon-viewer",
prefixUrl: "./images/",
xmlPath: "./GeneratedImages/dzc_output.xml",
showNavigator: true,
navigatorElement: "openseadragon-navigator"
});
viewer.setDebugMode(true); // 通过操作 Viewer 对象开启调试模式。
</script>
</body>
</html>
在以上的例子中我们通过创建 Viewer 对象创建了一个 Openseadragon 视图，并通过操作 Viewer 对象，开启了调试模式。在正常的使用中，我们几乎所有操作都是围绕这 Viewer 对象及其附属成员对象展开。
3.1 Viewer 内置对象
我们在创建 Viewer 对象时，OpenSeadragon 也同时创建了 Viewer 的相关成员对象。Viewer 对象主要包含以下几个内置对象：
canvas：一个
元素，它为 “container”的子节点，其内部包含了两个子元素，分别是 画板和另一个节点。 画板为 OpenSeadragon 呈现 DZI 的节点，另一个节点内部为自定义覆盖图层。
container：一个元素，它为 “element” 元素的子节点。
drawer：OpenSeadragon.Viewer 渲染瓦片图控件。
element：我们在配置 OpenSeadragon 时 “id” 属性或 “element”属性所对应的 DOM 节点。
initialPage：数字类型，仅在我们开启 sequenceMode 时有效，表示当前为第几张图。
navigator：OpenSeadragon 的导航视图对象。
viewport：为 OpenSeadragon 坐标处理控件。
world：追踪场景中的每一张瓦片图。
3.2 操作事件
Viewer 对象为我们提供了丰富且全面的操作事件，通过这些操作事件，我们可以方便的对 OpenSeadragon 做二次开发。
add-item-failed：添加元素错误
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 message String source String options Object 传递给 addTiledImage 方法的参数 userData Object 可为空 任意自定义的对象 add-overlay：添加覆盖图层
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 element Element 该覆盖图层的 DOM 节点 location OpenSeadragon.Point | OpenSeadragon.Rect placement Openseadragon.Placement userData Object 可为空 任意自定义的对象 animation：弹性动画（缩放、拖拽等）执行中，执行时机为每一帧动画渲染完毕
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 userData Object 可为空 任意自定义的对象 animation-finish：弹性动画执行结束，参数类型与 “animation”一致
animation-start：弹性动画执行结束，参数类型与 “animation”一致
canvas-click：鼠标点击 canvas 对象对应的 DOM 节点
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 position OpenSeadragon.Point 事件相对于被追踪元素的位置 quick Boolean 仅当 clickDistThreshold 和 clickTimeThreshold 都通过时才为True，用于区分点击和拖动 shift Boolean 在执行此事件时是否按下了 shift 键 originalEvent Object 浏览器原生 DOM 事件 preventDefaultAction Boolean 设置为 true 时可以防止点击时图像缩放，默认为 false userData Object 可为空 任意自定义的对象 canvas-double-click：鼠标双击 canvas 对象对应的 DOM 节点
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 position OpenSeadragon.Point 事件相对于被追踪元素的位置 shift Boolean 在执行此事件时是否按下了 shift 键 originalEvent Object 浏览器原生 DOM 事件 preventDefaultAction Boolean 设置为 true 时可以防止点击时图像缩放，默认为 false userData Object 可为空 任意自定义的对象 canvas-drag：鼠标在 canvas 对象对应的 DOM 节点上拖拽
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 position OpenSeadragon.Point 事件相对于被追踪元素的位置 delta OpenSeadragon.Point 开始拖拽和结束拖拽之差在 x，y上的分量 speed Number 当前拖拽的速度，单位为像素每秒 direction Number 当前拖拽的方向，表示为相对于正 X 轴的逆时针角度（ -pi 到 pi， 以弧度表示）。仅在速度大于 0 时有效 shift Boolean 在执行此事件时是否按下了 shift 键 originalEvent Object 浏览器原生 DOM 事件 preventDefaultAction Boolean 设置为 true 时可以防止点击时图像缩放，默认为 false userData Object 可为空 任意自定义的对象 canvas-drag-end：
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 position OpenSeadragon.Point 事件相对于被追踪元素的位置 speed Number 拖拽结束时的速度，单位为像素每秒 direction Number 拽结束时的方向，表示为相对于正 X 轴的逆时针角度（ -pi 到 pi， 以弧度表示）。仅在速度大于 0 时有效 shift Boolean 在执行此事件时是否按下了 shift 键 originalEvent Object 浏览器原生 DOM 事件 userData Object 可为空 任意自定义的对象 canvas-enter：鼠标进入 canvas 对象所表示的 div 元素。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 pointerType String 触发此事件的指示器类型，“mouse”（鼠标），“touch”（触屏触摸），“pen”（触控笔）等 position OpenSeadragon.Point 事件相对于被追踪的元素的位置 buttons Number 当前按下的按钮。位标志组合， 0: none, 1: primary (or touch contact), 2: secondary, 4: aux (often middle), 8: X1 (often back), 16: X2 (often forward), 32: pen eraser. pointers Number 被追踪元素中活动的指示器（所有类型）的数目 insideElementPressed Boolean 当鼠标左键被按下且在被跟踪元素中被初始化，为 true，否则为 false buttonDownAny Boolean 处于活动状态时屏幕上任何地方的有按钮被按下。已弃用，被 “buttons”替代。 originalEvent Object 浏览器原生 DOM 事件 userData Object 可为空 任意自定义的对象 canvas-exit：鼠标离开 canvas 对象所表示的 div 元素。参数类型与 “canvas-enter”一致
canvas-key：当焦点在 canvas 对象所表示的 div 元素上且有键盘按键被按下。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 originalEvent Object 浏览器原生 DOM 事件 preventDefaultAction Boolean 设置为true可以防止默认的键盘行为。默认值:false。 preventVerticalPan Boolean 设置为true可防止键盘垂直平移。默认值:false。 preventHorizontalPan Boolean 设置为true可防止键盘水平平移。默认值:false。 userData Object 可为空 任意自定义的对象 canvas-nonprimary-press：指示器上任何非主要的按钮在 canvas 对象所表示的 DOM 元素上按下。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 position OpenSeadragon.Point 事件相对于被追踪的元素的位置 pointerType String 触发此事件的指示器类型，“mouse”（鼠标），“touch”（触屏触摸），“pen”（触控笔）等 button Number 引起此事件的按钮。-1：不存在，0：主要按钮（鼠标左键），1：辅助按钮（鼠标滚轮），2：次要按钮（鼠标右键），3：X1（返回），4：X2（前进），5：触控笔橡皮 buttons Number 当前按下的按钮。位标志组合， 0: none, 1: primary (or touch contact), 2: secondary, 4: aux (often middle), 8: X1 (often back), 16: X2 (often forward), 32: pen eraser. originalEvent Object 浏览器原生 DOM 事件 userData Object 可为空 任意自定义的对象 canvas-nonprimary-release：指示器上任何非主要的按钮在 canvas 对象所表示的 DOM 元素上释放。参数类型与“canvas-nonprimary-press”一致。
canvas-pinch：触屏事件，手指在 canvas 对象所表示的 DOM 元素上捏合。
canvas-press：在canvas 对象所表示的 DOM 元素上鼠标左键、手指或触控笔按下。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 pointerType String 触发此事件的指示器类型，“mouse”（鼠标），“touch”（触屏触摸），“pen”（触控笔）等 position OpenSeadragon.Point 事件相对于被追踪的元素的位置 insideElementPressed Boolean 如果鼠标左键当前正在被按下，并且在被跟踪的元素中被初始化，则为 true，否则为 false。 insideElementReleased Boolean 如果按钮被释放时，光标仍然在被跟踪的元素内，则为 true originalEvent Object 浏览器原生 DOM 事件 userData Object 可为空 任意自定义的对象 canvas-release：在canvas 对象所表示的 DOM 元素上鼠标左键、手指或触控笔松开。参数类型与“canvas-press”一致。
canvas-scroll：鼠标滚轮在canvas 对象所表示的 DOM 元素上滚动。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 position OpenSeadragon.Point 事件相对于被追踪元素的位置 scroll Number 引起该事件的鼠标滚轮的滚动距离 shift Boolean 在执行此事件时是否按下了 shift 键 originalEvent Object 浏览器原生 DOM 事件 userData Object 可为空 任意自定义的对象 clear-overlay：所有覆盖图层被移除。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 userData Object 可为空 任意自定义的对象 close：Viewer 对象被关闭。参数类型与“clear-overlay”相同。
constrain：viewport 约束被引用。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 immediately Boolean 是否使用"immediately"标志调用了触发此事件的函数 userData Object 可为空 任意自定义的对象 container-enter：鼠标进入 container 对象所表示的 DOM 对象节点。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 position OpenSeadragon.Point 事件相对于被追踪的元素的位置 buttons Number 当前按下的按钮。位标志组合， 0: none, 1: primary (or touch contact), 2: secondary, 4: aux (often middle), 8: X1 (often back), 16: X2 (often forward), 32: pen eraser. pointers Number 被追踪元素中活动的指示器（所有类型）的数目 insideElementPressed Boolean 当鼠标左键被按下且在被跟踪元素中被初始化，为 true，否则为 false buttonDownAny Boolean 处于活动状态时屏幕上任何地方的有按钮被按下。已弃用，被 “buttons”替代。 originalEvent Object 浏览器原生 DOM 事件 userData Object 可为空 任意自定义的对象 container-exit：鼠标离开 container 对象所表示的 DOM 对象节点。参数类型与“container-enter”一致。
controls-enabled：导航栏控件显示或隐藏。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 enabled Boolean userData Object 可为空 任意自定义的对象 flip：翻转状态改变。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 flipped Number 在这次改变后的翻转状态 userData Object 可为空 任意自定义的对象 full-page：充满页面状态改变。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 fullPage Number 状态改变后充满页面为 true，反之为 false userData Object 可为空 任意自定义的对象 full-screen：全屏状态改变。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 fullScreen Number 状态改变后全屏为 true，反之为 false userData Object 可为空 任意自定义的对象 home：初始化图像大小（home）操作。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 immediately Boolean userData Object 可为空 任意自定义的对象 mouse-enabled：鼠标/触控允许或禁用状态改变。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 enabled Boolean userData Object 可为空 任意自定义的对象 navigator-click：导航视图上的点击事件。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 position OpenSeadragon.Point 事件相对于被追踪元素的位置 quick Boolean 仅当 clickDistThreshold 和 clickTimeThreshold 都通过时才为True，用于区分点击和拖动 shift Boolean 在执行此事件时是否按下了 shift 键 originalEvent Object 浏览器原生 DOM 事件 userData Object 可为空 任意自定义的对象 preventDefaultAction Boolean 设置为 true 时可以防止点击时图像缩放，默认为 false navigator-drag：导航视图上的拖拽事件。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tracker OpenSeadragon.MouseTracker 对触发此事件的 MouseTracker 的引用 position OpenSeadragon.Point 事件相对于被追踪元素的位置 delta OpenSeadragon.Point 开始拖拽和结束拖拽之差在 x，y上的分量 speed Number 当前拖拽的速度，单位为像素每秒 direction Number 当前拖拽的方向，表示为相对于正 X 轴的逆时针角度（ -pi 到 pi， 以弧度表示）。仅在速度大于 0 时有效 shift Boolean 在执行此事件时是否按下了 shift 键 originalEvent Object 浏览器原生 DOM 事件 userData Object 可为空 任意自定义的对象 preventDefaultAction Boolean 设置为 true 时可以防止点击时图像缩放，默认为 false navigator-scroll：导航视图上的滚动事件。参数类型与“canvas-scroll”一致。
open：一张或多张图像源打开并加载完毕。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 source OpenSeadragon.TileSource 打开的图象源 userData Object 可为空 任意自定义的对象 open-failed：图象源加载失败。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 message String 错误信息 source String 失败的图象源 userData Object 可为空 任意自定义的对象 page：在配置有多个图象源的 Viewer 对象中切换图像。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 page Number 图像序号 userData Object 可为空 任意自定义的对象 pan：图像可视区域平移。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 center OpenSeadragon.Point 可视区域在中心在图象上的坐标 immediately Boolean userData Object 可为空 任意自定义的对象 pre-full-page：Viewer 对象更改全页面模式之前。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 fullPage Number 将要改变状态为充满页面时为 true，反之为 false preventDefaultAction Boolean 设置为 true 时可以阻止状态改变，默认为 false userData Object 可为空 任意自定义的对象 pre-full-screen：Viewer 对象更改全屏模式之前。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 fullPage Number 将要改变状态为全屏时为 true，反之为 false preventDefaultAction Boolean 设置为 true 时可以阻止状态改变，默认为 false userData Object 可为空 任意自定义的对象 remove-overlay：删除任意一个覆盖图层。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 element Element 要删除的覆盖图层的 DOM 节点对象 userData Object 可为空 任意自定义的对象 reset-size：Viewer 对象可视区域尺寸或主页面被重置。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 contentSize OpenSeadragon.Point contentBounds OpenSeadragon.Rect viewer 对象可视区域边界 homeBounds OpenSeadragon.Rect viewer 对象可视区域边界。已弃用“contentBounds”代替 contentFactor Number userData Object 可为空 任意自定义的对象 resize：Viewer 对象可视区域被改变。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 newContainerSize OpenSeadragon.Point maintain Boolean userData Object 可为空 任意自定义的对象 rotate：旋转角度改变。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 degrees Number 旋转角度 userData Object 可为空 任意自定义的对象 tile-drawing：瓦片绘制之前，此时可以更改图像。注意：此事件尽在 drawer 使用 时有效。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tile OpenSeadragon.Tile 将要被绘制的瓦片 tiledImage OpenSeadragon.TiledImage 正在被绘制的 TiledImage context OpenSeadragon.Tile 将要绘制进入的 HTML canvas 的 context rendered OpenSeadragon.Tile 包含瓦片图图像 HTML canvas 的 context userData Object 可为空 任意自定义的对象 tile-drawn：瓦片图绘制完毕。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tiledImage OpenSeadragon.TiledImage 正在被绘制的 TiledImage tile OpenSeadragon.Tile userData Object 可为空 任意自定义的对象 tile-load-failed：一张瓦片加载失败。
参数 类型 属性 描述 tile OpenSeadragon.Tile 加载失败的瓦片 tiledImage OpenSeadragon.TiledImage 此瓦片所归属的 tiledImage time Number 此瓦片图开始加载的时间，精确到毫秒 message String 错误信息 tileRequest XMLHttpRequest 用于加载瓦片（如果存在的话）的 XMLHttpRequest tile-loaded：一张瓦片被加载到内存中。这意味着该图片已经被下载，可以在绘制到 canvas 上之前被修改。
参数 类型 属性 描述 image Image 该瓦片对应的图片 tiledImage OpenSeadragon.TiledImage 该瓦片对应的 TiledImage tile OpenSeadragon.Tile 被加载的瓦片 tiledImage XMLHttpRequest 加载此瓦片的 AJAX 请求（如果存在） getCompletionCallback function 在完成对图像的异步处理后的回调函数。当调用该函数时，图像将被标记为完全加载 tile-unload：一张瓦片从内存中被卸载。
参数 类型 属性 描述 tiledImage OpenSeadragon.TiledImage 被卸载的图像所对应的 tiledImage tile OpenSeadragon.Tile 被卸载的瓦片 update-level：金字塔图层数更新。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tiledImage OpenSeadragon.TiledImage 正在被绘制的 tiledImage havedrawn Object level Object opacity Object visibility Object drawArea OpenSeadragon.Rect topleft Object 弃用，使用“drawArea”替代 bottomright Object 弃用，使用“drawArea”替代 currenttime Object best Object userData Object 可为空 任意自定义的对象 update-overlay：覆盖图层的位置（location 或 placement）发生改变。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 element Element location OpenSeadragon.Point OpenSeadragon.Rect palcement OpenSeadragon.Placement userData Object 可为空 任意自定义的对象 update-tile：瓦片图发生改变。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 tiledImage OpenSeadragon.TiledImage 正在绘制的 TiledImage tile OpenSeadragon.Tile userData Object 可为空 任意自定义的对象 update-viewport：图像可视区域发生改变。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 userData Object 可为空 任意自定义的对象 viewport-change：弹性动画发生改变（缩放，平移），图像可视区域将要发生改变。参数类型与“update-viewport”一致。
visible：Viewer 对象显示或隐藏。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 visible Boolean userData Object 可为空 任意自定义的对象 zoom：缩放倍率发生改变。
参数 类型 属性 描述 eventSource OpenSeadragon.Viewer 对引发事件的 viewer 对象的引用 zoom Number refPoint OpenSeadragon.Point immediately Boolean userData Object 可为空 任意自定义的对象
通过这些事件提供的相应的钩子，我们可以在恰当的时机进行操作，方便的对 OpenSeadragon 做开发。
3.3 绑定与解绑事件
通过相关方法我们可以将相关的方法绑定到相应的事件上或者从相关事件上将相应的方法解绑。OpenSeadragon 为我们提供了相应的方法进行绑定事件，分别是 “addHandler”和 “addOnceHandler”。通过 “removeHandler”我们可以将方法从事件上解绑。
addHandler(event, handler, userData) : 绑定事件。
参数 类型 属性 默认值 描述 eventName String 要注册的事件的名称 handler OpenSeadragon.EventHandler 当事件发生时调用的函数 userData OpenSeadragon.EventHandler 可选参数 null 当事件发生时调用的函数 addOnceHandler(event, handler, userData, times) ：绑定有执行次数限制的事件。
参数 类型 属性 默认值 描述 eventName String 要注册的事件的名称 handler OpenSeadragon.EventHandler 当事件发生时调用的函数 userData OpenSeadragon.EventHandler 可选参数 null 当事件发生时调用的函数 times Number 可选参数 1 调用几次之后进行解绑 removeHandler(eventName, handler) ：解绑事件上的指定回调。
参数 类型 属性 默认值 描述 eventName String 要注册的事件的名称 handler OpenSeadragon.EventHandler 要解绑的函数 removeAllHandlers(eventName) ：解绑对应事件上的所有回调。
参数 类型 属性 默认值 描述 eventName String 要解绑的事件的名称 raiseEvent(eventName, eventArgs) ：触发相关事件，可选择的传递附加信息。
参数 类型 属性 默认值 描述 eventName String 要注册的事件的名称 eventArgs Object 事件相关数据 getHandler(eventName) ：该方法为我们返回了一个函数，该函数可以遍历并执行相应事件上的注册的所有方法。
参数 类型 属性 默认值 描述 eventName String 要注册的事件的名称
// 绑定事件
viewer.addHandler("canvas-click", event => {
console.log("鼠标单击了一下");
});
// 绑定事件并在执行两次后解绑
viewer.addOnceHandler("canvas-click", event => {
console.log("鼠标单击了一下");
}, null, 2);
// 事件的绑定与解绑
function demoClick(event) {
console.log(event.userData);
viewer.removeHandler("canvas-click", demoClick); // 解绑事件
}
viewer.addHandler("canvas-click", demoClick, "鼠标单击了一下"); // 绑定事件
3.4 覆盖图层操作
在 2.3 中我们讲解了在 OpenSeadragon 的配置参数中添加覆盖图层。Viewer 类中也给我们提供了相应的方法来添加和操作覆盖图层。
addOverlay(element, location, placement, onDraw) ：在当前 Viewer 中添加一个 html 元素作为覆盖图层。在当前 Viewer 关闭时用词方式添加的覆盖图层将会被删除。该方法提供菊花链。可以触发“add-overlay”事件。
参数 类型 属性 默认值 描述 element Element | String | Object 可以是一个 DOM 元素的引用或者 其 “id”，也可以是指定的覆盖图层的配置对象。如果使用覆盖图层配置对象，请参考 OpenSeadragon.Overlay 可用配置表 location OpenSeadragon.Point | OpenSeadragon.Rect 覆盖图层相对于图像的位置，它可以是一个点或者一个矩形区域 placement OpenSeadragon.Placement 可选属性 OpenSeadragon.Placement.TOP_LEFT location 坐标将被是为相对的图像位置的位置 onDraw function 可选属性 如果提供了回调函数，在需要绘制覆盖图层时就会进行调用。它负责在回调时进行绘制或定位，它传递了 position，size 和 element clearOverlay() ：清除所有覆盖图层，并触发覆盖图层更新。该方法提供菊花链。可以触发“clear-overlay”事件。
getOverlayById(element) ：查找由引用的 DOM 元素或相应“id”的覆盖图层，并将其作为对象返回，如果没有找到返回 null。
参数 类型 属性 默认值 描述 element Element | String 覆盖图层引用的 DOM 元素或 引用的 DOM 元素的“id” removeOverlay(element) ：根据所提供 DOM 元素的引用或 “id”删除指定的覆盖图层并执行一次覆盖图层更新事件。该方法提供菊花链。
参数 类型 属性 默认值 描述 element Element | String 要删除的覆盖图层引用的 DOM 元素或引用的 DOM 元素的“id” updateOverlay(element, location, placement) ：更新根据所提供 DOM 元素的引用或 “id”指定的覆盖图层，将其一佛那个到新的坐标，或新的相对位置。此方法提供菊花链。可以触发“update-overlay”事件。
参数 类型 属性 默认值 描述 element Element | String | Object 可以是一个 DOM 元素的引用或者 其 “id”，也可以是指定的覆盖图层的配置对象。如果使用覆盖图层配置对象，请参考 OpenSeadragon.Overlay 可用配置表 location OpenSeadragon.Point | OpenSeadragon.Rect 覆盖图层相对于图像的位置，它可以是一个点或者一个矩形区域 placement OpenSeadragon.Placement 可选属性 OpenSeadragon.Placement.TOP_LEFT location 坐标将被是为相对的图像位置的位置
3.5 Viewer 对象基本操作
open(tileSources, initialPage) ：在 Viewer 中打开一组瓦片图，并关闭之前所有的瓦片图。可以引发“open”和“open-failed”事件。
参数 类型 属性 默认值 描述 tileSources Array | String | Object | function 与 OpenSeadragon 配置参数中 tileSources 参数类似 initialPage Number 如果 sequenceMode 为 true，未指定当前参数时展示当前图像源在当前 Viewer 对象的指定的初始化页面；如果指定该参数，则该参数覆盖当前 Viewer 对象的初始化页面。 isOpen() ：获得 Viewer 中瓦片图是否打开。返回值为布尔类型。
setVisible(visible) ：设置 Viewer 显示隐藏。该函数支持菊花链。可以引发“visible”事件。
参数 类型 属性 默认值 描述 visible Boolean isVisible() ：获得 Viewer 显示隐藏状态。返回值为布尔类型。
close() ：关闭 Viewer。该函数支持菊花链。可以引发“close”事件。
destroy() ：销毁 Viewer 并清除 OpenSeadragon 创建的所有内容。示例：
var viewer = OpenSeadragon({ [...] });
viewer.destroy();
viewer = null;
goToPage(page) : 根据序号跳转指定的图像。该函数支持菊花链。可引发“page”事件。
参数 类型 属性 默认值 描述 page Number 要跳转的图像的序号 currentPage() ：获得当前使用的瓦片图的序号。返回值为数字类型。
forceRedraw() ：强制重绘 Viewer 对象中的内容。该函数支持菊花链。
setDebugMode(true) : 打开或关闭调试模式。
参数 类型 属性 默认值 描述 true Boolean 为 true 打开调试模式，为 false 关闭调试模式 setMouseNavEnabled(enabled) ：设置鼠标交互开启禁用。该函数支持菊花链。可以触发“mouse-enabled”事件。
参数 类型 属性 默认值 描述 true Boolean 为 true 开启鼠标交互，为 false 关闭鼠标交互 isMouseNavEnabled() ：获取鼠标交互开启或禁用状态。返回值为布尔类型。
addReferenceStrip() ：基于当前设置的图像源展示参考条。仅当 sequenceMode 为 true 时有效。
removeReferenceStrip() ：删除参考带并禁用显示它。
addSimpleImage(options) : 向 Viewer 中添加一张简单的图片。参数类型与 addTiledImage 类似只有 tileSource 由 url 代替。可以触发“add-item”和 “add-item-failed”事件。
参数 类型 属性 默认值 描述 options Object 参数和 addTiledImage 类似，url 见下表
参数 类型 属性 默认值 描述 url 字符串 添加进入的图片的链接 addTiledImage(options) ：向 Viewer 中添加一个 DZI 的图像源。options.tileSource 可以是 OpenSeadragon 配置参数中 tileSources 下除了数组外的任意类型。注意：你可以指定 options.width 或 options.height 而不是同时指定，不指定的尺寸根据图像的长宽比自动计算。如果开启 collectionMode，新添加的图像将自动与其它图像一起排列。可以触发“add-item”和 “add-item-failed”事件。
参数 类型 属性 默认值 描述 options Object 具体 options 的值见下表
参数 类型 属性 默认值 描述 tileSource String | Object | function 图像源指示符。如果是字符串，则表示一个链接，根据该链接指向文件的扩展名确定图像源的配置类型。如果是 JSONP 则文件类型为 *.js，其他情况则视为文本文件，根据文本内容被确定作为 XML 还是 JSON 或是文本进行解析。如果是对象，则通过其内部参数配置足以支撑起一个图像源。对象内部如果有一个“getTileUrl”的函数属性，它将被视为自定义的图像源。 index Number 可选属性 图像在序列中被插入位置。如果未指定，图像将被插入序列顶部。 replace Boolean 可选属性 false 如果为 true ，options.index 指定的插入位置的图像将会被删除，新的图像将将其替换。图像源将在原图像移除之前被解析获取，以免在 World 中留下空白。 x Number 可选属性 0 图像在图像可视区域中的 X 坐标。 y Number 可选属性 0 图像在图像可视区域中的 Y 坐标。 width Number 可选属性 1 图像在图像可视区域中的宽。 height Number 可选属性 图像在图像可视区域中的高。 fitBounds OpenSeadragon.Rect 可选属性 图像可视区域的边界，如果指定， x，y，width 和 height 将被忽略。 fitBoundsPlacement OpenSeadragon.Placement 可选属性 OpenSeadragon.Placement.CENTER 在指定了 options.fitBounds 的情况下如何在选定范围内锚定图像。 clip OpenSeadragon.Rect 可选属性 要剪切的区域（以图像原始像素为单位，剪切区域外的图像将不可见）。只能在浏览器 HTML5 Canvas 下有效 opacity Number 可选属性 1 图像的透明度，如果为 1 则不透明，如果为 0 则完全隐藏 preload Boolean 可选属性 false 加载隐藏图像的默认开关，true 加载，false 不加载 degrees Number 可选属性 0 瓦片图在其左上角的初始旋转角度 compositeOperation String 可选属性 如何将图像与其他图像融合 crossOriginPolicy String 可选属性 此图像的 crossOriginPolicy 将覆盖 viewer.crossOriginPolicy ajaxWithCredentials Boolean 可选属性 是否在瓦片图的 AJAX 上设置凭据 loadTilesWidthAjax Boolean 可选属性 是否使用 AJAX 请求加载瓦片图数据。 ajaxHeaders Object 可选属性 在 AJAX 请求瓦片图时的请求头。注意：这些请求头将被合并到 OpenSeadragon.Options 中指定的任何请求头中。为请求头指定的任何假值将清除其在 Viewer 级别上设置的现有值（如果存在的化）。 sucess function 可选属性 成功添加图像后的回调函数。他传递的事件对象包含了一个单独的属性：“item”，它是 TiledImage 的结果实例 error function 可选属性 无法成功添加图像时的回调函数。它传递了错误事件对象，该对象包含“message”和“source”属性。 collectionImmediately Boolean 可选属性 false 如果 collectionMode 为开启状态，则指定时立即生成新的排列还是加载动画 placeholderFillStyle String | CanvasGradient | CanvasPattern | function 可选属性 参见 OpenSeadragon.Options setFullPage(fullPage) ：开关全页面模式。该函数支持菊花链。可以触发“pre-full-page”和“full-page”事件。
参数 类型 属性 默认值 描述 fullPage Boolean 为 true 打开全页面模式，为 false 关闭全页面模式 isFullPage() ：获得当前是否全页面模式。返回值为布尔类型。
setFullScreen(fullScreen) ：开关全屏模式。该函数支持菊花链。可以触发“pre-full-screen”和“full-screen”事件。
参数 类型 属性 默认值 描述 fullPage Boolean 为 true 打开全屏模式，为 false 关闭全屏模式 isFullScreen() ：获得当前是否全屏模式。返回值为布尔类型。
gestureSettingsByDeviceType(type) ：获取指定的指针类设备（鼠标、触屏、触控笔等） Viewer 的操作设置。返回
OpenSeadragon.GestureSettings。
参数 类型 属性 默认值 描述 type String 指定的指针类设备类型 （“mouse”，“touch”，“pen”） _cancelPendingImages() ：清空加载中的图像队列。
3.6 导航栏控件操作
Viewer 对象还为我们提供了操作导航栏控件的相关方法，通过这些方法我们可以显示或隐藏导航栏，为导航栏增加或移除相应的控件。
setControlsEnabled(true) ：显示或隐藏导航栏控件。支持菊花链。该函数会触发“controls-enabled”事件。
参数 类型 属性 默认值 描述 true Boolean 为 true 时显示，为 false 时隐藏。 clearControls() ：清除导航栏控件。支持菊花链。
areControlsEnabled() ：获取导航栏控件显隐状态。返回值为布尔类型。
bindSequenceControls() ：当 sequenceMode 打开时绑定上一张下一张控件。支持菊花链。
bindStandardControls() ：绑定标准控件。支持菊花链。
addControl(element, controlOptions) ：为 Viewer 添加导航栏控件。（参数不详）
removeControl(element) ：移除 element 所对应的导航栏控件。支持菊花链。（参数不详）
4、Viewport 对象
在创建 Viewer 对象时，OpenSeadragon 同时为我们创建了内置的 Viewport 对象。通过 Viewport 对象提供的相关方法，我们可以对预览的图像本身进行相关操作，也可以对相关坐标进行相应的转换。
4.1 图像操作
通过 Viewport 提供的相关方法，我们可以使用代码对图像做平移、缩放等操作。
goHome(immediately) ：将图像大小和位置初始化。该函数会触发“home”事件。
参数 类型 属性 默认值 描述 immediately Boolean 当为 true 时不执行动画，为 false 时执行动画。 panBy(delta, immediately) ：将图像移动相应的距离。支持菊花链。该函数触发“pan”事件。
参数 类型 属性 默认值 描述 delta OpenSeadragon.Point 图像在水平方向和垂直方向移动的距离。单位 1 为图像宽度。 immediately Boolean 当为 true 时不执行动画，为 false 时执行动画。 panTo(center, immediately) ：将图像可视区域的中心定位到相应的坐标点。支持菊花链。该函数触发 “pan”事件。
参数 类型 属性 默认值 描述 center OpenSeadragon.Point 要定位到的图像可视区域中心点。单位 1 为图像宽度。 immediately Boolean 当为 true 时不执行动画，为 false 时执行动画。 zoomBy(factor, refPoint, immediately) ：图像放大为当前大小的多少倍。支持菊花链。该函数会触发“zoom”事件。
参数 类型 属性 默认值 描述 factor number 放大至当前的多少倍。 refPoint OpenSeadragon.Point 可选属性 放大时的焦点中心，默认为当前可视区域中心。 immediately Boolean 可选属性 false 当为 true 时不执行动画，为 false 时执行动画。 zoomTo(zoom, refPoint, immediately) ：图像放大到初始化图像的多少倍。支持菊花链。该函数会触发“zoom”事件。
参数 类型 属性 默认值 描述 zoom number 放大至初始化图像大小的多少倍。 refPoint OpenSeadragon.Point 可选属性 放大时的焦点中心，默认为当前可视区域中心。 immediately Boolean 可选属性 false 当为 true 时不执行动画，为 false 时执行动画。 applyConstraints(immediately) ：将过大或过小缩放和不在可视区域的图像调整到最近的最小缩放、最大缩放和合理的可操作位置。支持菊花链。该函数会触发“constrain”事件。
参数 类型 属性 默认值 描述 immediately Boolean 可选属性 false 当为 true 时不执行动画，为 false 时执行动画。 ensureVisible(immediately) ：等价于 applyConstraints。支持菊花链。
参数 类型 属性 默认值 描述 immediately Boolean 可选属性 false 当为 true 时不执行动画，为 false 时执行动画。 fitBounds(bounds, immediately) ：使窗口缩放和平移，以便使指定的边界占据更大的空间，这个方法忽略了约束（minZoom，maxZoom 和 visibilityRatio）。支持菊花链。
参数 类型 属性 默认值 描述 bounds OpenSeadragon.Rect 指定的边界。 immediately Boolean 可选属性 false 当为 true 时不执行动画，为 false 时执行动画。 fitBoundsWithConstraints(bounds, immediately) ：使视口缩放和平移，以便指定的边界在执行约束(minZoom, maxZoom和visitableratio)时尽可能多地占用视口的空间。注意:由于该方法强制了约束，所提供的部分边界可能会在视口之外结束。支持菊花链。
参数 类型 属性 默认值 描述 bounds OpenSeadragon.Rect 指定的边界。 immediately Boolean 可选属性 false 当为 true 时不执行动画，为 false 时执行动画。 fitHorizontally(immediately) ：缩放图片，使可视区域水平方向自适应并填满 Viewer。支持菊花链。
参数 类型 属性 默认值 描述 immediately Boolean 可选属性 false 当为 true 时不执行动画，为 false 时执行动画。 fitVertically(immediately) ：缩放图片，使可视区域垂直方向自适应并填满 Viewer。支持菊花链。
参数 类型 属性 默认值 描述 immediately Boolean 可选属性 false 当为 true 时不执行动画，为 false 时执行动画。 setFlip(state) ：设置图像水平翻转状态。支持菊花链。
参数 类型 属性 默认值 描述 state Boolean 设置的水平翻转状态。true 执行水平翻转，false 复原。 toggleFlip() ：切换翻转状态，并在导航视图和 viewer 上重新绘制图像。支持菊花链。
setRotation(degrees) ： 将图像旋转相应的角度。支持菊花链。
参数 类型 属性 默认值 描述 degrees Number 图像旋转的角度。0~360 setMargins(margins) ：将“home”的区域从四周推进相应的宽度。
参数 类型 属性 默认值 描述 margins Object 要推进的宽度。键值（Numbers，单位长度为屏幕像素）：left，top，right，bottom. update() ：更新缩放和可视区域中心坐标。如果有任何改变返回 tue, 否则返回 false.
resize(newContainerSize, maintain) ：重设 container 宽高，并在之后执行 fitBounds方法。支持菊花链。该函数会触发 “resize”事件。
参数 类型 属性 默认值 描述 newContainerSize OpenSeadragon.Point 新设的 container 宽高。 maintain Boolean resetContentSize(contentSize) ：为给定的内容大小更新视口的主边界和约束。支持菊花链。该函数会触发“reset-size”事件。
参数 类型 属性 默认值 描述 contentSize OpenSeadragon.Point 内容的大小，以内容单位表示 。
4.2 获取图像状态
根据 Viewport 提供的方法，我们可以获取图像的相关状态。
getAspectRatio() ：获得 container 宽高比，返回值为 Number 类型。
getBounds(current) ：获得可视区域边界。返回值为 OpenSeadragon.Rect 类型。
参数 类型 属性 默认值 描述 current Boolean 为当前位置传递true;默认为false(目标位置)。 getBoundsNoRotate(current) ：获得可视区域的边界，此方法忽略 Viewport 旋转。返回值为 OpenSeadragon.Rect 类型。
参数 类型 属性 默认值 描述 current Boolean 为当前位置传递true;默认为false(目标位置)。 getBoundsNoRotateWithMargins(current) ：获得包含镖局所占空间的可视区域边界，此方法忽略 Viewport 旋转。返回值为 OpenSeadragon.Rect 类型。
参数 类型 属性 默认值 描述 current Boolean 为当前位置传递true;默认为false(目标位置)。 getBoundsWithMargins(current) ：获得包含镖局所占空间的可视区域边界。返回值为 OpenSeadragon.Rect 类型。
参数 类型 属性 默认值 描述 current Boolean 为当前位置传递true;默认为false(目标位置)。 getCenter(current) ：获得可视区域的中点坐标。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 current Boolean 为当前位置传递true;默认为false(目标位置)。 getConstrainedBounds(current) ：返回考虑约束条件的边界，这是为了改进约束平移而添加的。
参数 类型 属性 默认值 描述 current Boolean 为当前位置传递true;默认为false(目标位置)。 getContainerSize() ：获得 container 的尺寸。返回值为 OpenSeadragon.Point 类型。
getFilp() ：获得图像的水平翻转状态。返回值为 Boolean 类型。
getHomeBounds() ：以 viewport 坐标返回 home 时的边界。返回值为 OpenSeadragon.Rect 类型。
getHomeBoundsNoRotate() ：以 viewport 坐标返回 home 时的边界，该方法忽略 viewport 旋转。返回值为 OpenSeadragon.Rect 类型。
getHomeZoom() ：获得 home 时的缩放倍率。返回值为 Number 类型。
getMargins() ：获得 home 时将拖向从两侧推入的指定数量。返回值为 Object 类型。
getMaxZoom() ：获得最大缩放倍率。返回值为 Number 类型。
getMinZoom() ：获得最小缩放倍率。返回值为 Number 类型。
getRotation() ：获得当前旋转角度。返回值为 Number 类型。
getZoom(current) ：获得缩放倍率。返回值为 Number 类型。
参数 类型 属性 默认值 描述 current Boolean 为当前位置传递true;默认为false(目标位置)。
4.3 坐标转换
Viewport 对象还为我们提供了坐标转换方法，通过这些方法，我们可以将坐标方便的在图像，viewerport，window 和 viewer之间做转换。
deltaPixlesFromPoints(deltaPoints, current) ：将 delta (平移向量)从 viewport 坐标转换为像素坐标。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 deltaPoints OpenSeadragon.Point 要转换的向量。 current Boolean 为当前位置传递true;默认为false(目标位置)。 deltaPixlesFromPointsNoRotate(deltaPoints, current) ：将 delta (平移向量)从 viewport 坐标转换为像素坐标, 此方法忽略 viewport 旋转。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 deltaPoints OpenSeadragon.Point 要转换的向量。 current Boolean 为当前位置传递true;默认为false(目标位置)。 deltaPointsFromPixles(deltaPixels, current) ：将 delta (平移向量)从像素坐标转换为 viewport 坐标。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 deltaPixels OpenSeadragon.Point 要转换的向量。 current Boolean 为当前位置传递true;默认为false(目标位置)。 deltaPointsFromPixlesNoRotate(deltaPixels, current) ：将 delta (平移向量)从像素坐标转换为 viewport 坐标，此方法忽略 viewport 旋转。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 deltaPixels OpenSeadragon.Point 要转换的向量。 current Boolean 为当前位置传递true;默认为false(目标位置)。 imageToViewerElementCoordinates(pixel) ：将 image 下的的坐标转换为 Viewer 下的坐标。注：多图像下不准确。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 pixel OpenSeadragon.Point imageToViewportCoordinates(imageX, imageY) ：将 image 下的坐标转换为 Viewport 下的坐标。注：多图像下不准确，使用 TileImage 下的 imageToViewportCoordinates 方法替代。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 imageX OpenSeadragon.Point | Number 在 image 坐标体系下的要转换的点或者该点的 X 坐标。 imageY Number 可选属性 image 坐标体系下要转换的点的 Y 坐标 imageToViewportRectangle(imageX, imageY, pixelWidth, pixelHeight) ：将基于像素单位的矩形转换为基于 viewport 坐标体系下的坐标。注：多图像下不准确，使用 TileImage 下的 imageToViewportRectangle 方法替代。返回值为 OpenSeadragon.Rect 类型。
参数 类型 属性 默认值 描述 imageX OpenSeadragon.Rect | Number 在 image 坐标体系下的要转换的矩形或者该矩形的 X 坐标。 imageY Number 可选属性 image 坐标体系下要转换的矩形的 Y 坐标 pixelWidth Number 可选属性 矩形的像素宽 pixelHeight Number 可选属性 矩形的像素高 imageToViewportZoom(imageZoom) ：将 image 下的缩放比率转换为 viewport 下的缩放比率。image 缩放：原始图像大小与显示图像大小的比例。1表示原始图像大小，0.5表示一半大小……viewport缩放：显示图像的宽度与视口的宽度之比。1表示相同的宽度，2表示图像的宽度是视口宽度的两倍……注：多图像下不准确。返回值为 Number 类型、
参数 类型 属性 默认值 描述 imageZoom Number 基于图像的缩放倍率 imageToWindowCoordinates(pixel) ：将 image 下的坐标转换为 window 下的坐标。注：多图像下不准确。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 pixel OpenSeadragon.Point viewerElementToImageCoordinates(pixel) ：将 Viewer 下的坐标转换为 image 下的坐标。 注：多图像下不准确。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 pixel OpenSeadragon.Point viewerElementToViewportCoordinates(pixel) ：将 Viewer 下的坐标转换为 Viewport 下的坐标。 。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 pixel OpenSeadragon.Point viewerElementToViewportRectangle(rectangle) ：将 Viewer 下的矩形的基于像素单位的坐标转换为基于 Viewport 下的坐标。返回值为 OpenSeadragon.Rect 类型。
参数 类型 属性 默认值 描述 rectangle OpenSeadragon.Rect 要转换的矩形 viewportToImageCoordinates(viewerX, viewerY) ：将 Viewport 下的坐标转换为 image 下的坐标。注：多图像下不准确，使用 TileImage 下的 viewportToImageCoordinates 方法替代。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 imageX OpenSeadragon.Point | Number 在 Viewport 坐标体系下的要转换的点或者该点的 X 坐标。 imageY Number 可选属性 Viewport 坐标体系下要转换的点的 Y 坐标 viewportToImageRectangle(viewerX, viewerY, pointWidth, pointHeight) ：将 Viewport 下的矩形的坐标转换为 image 下的坐标。注：多图下不准确，使用 TiledImage 下的 viewportToImageRectangle 方法替代。返回值为 OpenSeadragon.Rect 类型。
参数 类型 属性 默认值 描述 imageX OpenSeadragon.Rect | Number 在 Viewport 坐标体系下的要转换的矩形或者该矩形的 X 坐标。 imageY Number 可选属性 Viewport 坐标体系下要转换的矩形的 Y 坐标 pixelWidth Number 可选属性 Viewport 坐标体系下矩形的宽 pixelHeight Number 可选属性 Viewport 坐标体系下矩形的高 viewportToImageZoom(viewportZoom) ：将 Viewport 下的缩放倍率转换为 image 下的缩放倍率。image 缩放：原始图像大小与显示图像大小的比例。1表示原始图像大小，0.5表示一半大小……viewport缩放：显示图像的宽度与视口的宽度之比。1表示相同的宽度，2表示图像的宽度是视口宽度的两倍……注：多图像下不准确。返回值为 Number 类型。
参数 类型 属性 默认值 描述 viewportZoom Number 基于 Viewport 的缩放倍率 viewportToViewerElementCoordinates(point) ：将 Viewport 下坐标转换为 Viewer 下基于像素单位的坐标。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 point OpenSeadragon.Point viewportToViewerElementRectangle(rectangle) ：将 Viewport 下的矩形的坐标转换为 Viewer 下基于像素单位的坐标。返回值为 OpenSeadragon.Rect 类型。
参数 类型 属性 默认值 描述 point OpenSeadragon.rectangle 要转换坐标的矩形 viewportToWindowCoordinates(point) ：将 Viewport 下的坐标转换为 window 下基于像素单位的坐标。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 point OpenSeadragon.Point windowToImageCoordinates(pixel) ：将 window 下的像素坐标转换为 image 下的坐标。注：多图下不准确。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 pixel OpenSeadragon.Point windowToViewportCoordinates(pixel) ：将 window 下的像素坐标转换为 Viewport 下的坐标。返回值为 OpenSeadragon.Point 类型。
参数 类型 属性 默认值 描述 pixel OpenSeadragon.Point
5、鼠标（指针设备）追踪器
OpenSeadragon 为我们提供了 MouseTracker 类，我们可以基于 MouseTracker 类来对某个元素创建鼠标追踪器。通过操作鼠标追踪器，我们可以方便的对某个元素做一些鼠标或键盘事件绑定以做到对一些连续事件的持续追踪或对一些特定事件做相关操作。
// ...
var viewer = new OpenSeadragon.Viewer({
//...
});
var viewerTracker = new OpenSeadragon.MouseTracker({ // 创建鼠标追踪器
element: this.viewer.canvas, // 设置要追踪的元素
moveHandler: event => { // 设置绑定的事件
// ...
}
// ...
});
viewerTracker.setTracking(true); // 开启对目标元素上的事件的追踪
viewerTracker.clickHandler = event => { // 直接在鼠标追踪器上绑定事件
viewerTracker.moveHandler = null; // 在鼠标追踪器上解绑事件
viewerTracker.setTracking(false); // 关闭对目标元素上的事件的追踪
// ...
}
// ...
通过以上示例，我们为 viewer 下的 canvas 对象添加了一个鼠标追踪器，并绑定解绑了相应的事件。需要注意的是我们创建鼠标追踪器后需要通过 setTracking 方法来激活相应的鼠标追踪器。
6、第三方插件
OpenSeadragon 作为一款流行的 Web 端 DZI 图像预览插件，必然也拥有丰富的第三方插件库。通过引入这些第三方插件库，我们可以减少重复的发明“轮子”，极大的减少开发量。根据 OpenSeadragon 官方文档的介绍，OpenSeadragon 主要有以下第三方插件：
OpenSeadragonAnnotations ：允许您基于 SVG 绘制随图像平移缩放的图层。用于注释和突出相应的目标图像区域。
OpenSeadragonAnnotorious ：支持以 W3C Web 注释格式创建和显示注释。
Bookmark URL ：更新页面URL并保存当前缩放和平移的状态。
OpenSeadragonCanvasOverlay ：允许您添加能够随图像平移缩放的 Canvas 图层。
OpenSeadragonCanvasOverlayHd ：允许您添加一个高清的基于 Canvas 的图层，且该图层能够随图像平移和缩放并支持多图像模式。
OpenSeadragonDraggableNavigator ：允许用户在 Viewer 上拖拽导航视图。
OpenSeadragonFabricjsOverlay ：允许您添加基于 Fabric.js 的 Canvas 图层，该图层能够随图像平移和缩放。
OpenSeadragonFiltering ：允许您为 OpenSeadragon 添加图像滤镜。
OpenSeadragonGL ：允许您为所有的瓦片图添加 WebGL 着色器。
OpenSeadragonGuides ：允许您为 OpenSeadragon Viewer 添加水平和垂直的参考线。
OpenSeadragonHTMLelements ：允许您添加能够随 OpenSeadragon Viewer 平移、缩放、旋转和翻转的 HTML 元素。
HTML Overlay ：创建 HTML 图层的另一个方法。创建一个能够随图片平移缩放的 DOM 节点。
openSeadragonIiifEyes ：在 OpenSeadragon/iiif 环境中，从瓦片中检索原始坐标的 RGB 值。
OpenSeadragonImagingHelper ：在简化的坐标系中提供坐标转换、平移缩放的方法。
OpenSeadragonJustifiedCollection ：在网格布局中安排集合。
OpenSeadragonMagnifier ：允许您在类似导航视图的框中方法部分图像。
OpenSeadragonMultiRow ：为多行图像序列添加导航和选项。
OpenSeadragonPaperjsOverlay ：允许您添加基于 Paper.js 的 Canvas 图层，该图层能够随图像平移缩放。
OpenSeadragonRGB ：允许读取图像像素的 RGB 值、
OpenSeadragonScalebar ：显示您的图像的规模在现实世界的测量（添加比例尺）。
OpenSeadragonScreenshot ：允许您用可选的放大倍数对可视区域做截图。
OpenSeadragonSelection ：提供了选择图像矩形部分的功能。用于剪裁图像。
OpenSeadragonSmartScrollZoom ：检测用户滚动鼠标滚轮的速度，并相应提高缩放速度。
SVG Overlay ：允许您添加 SVG 元素，该元素可随图像平移缩放。
OpenSeadragonViewerInputHook ：为 OpenSeadragon.Viewer 和/或 OpenSeadragon.MouseTracker 提供一个钩子，用于重写/扩展默认的用户输入事件处理行为的鼠标跟踪器。
OpenSeadragonWMTS ：允许显示通过WMTS协议提供的地理参考地图。
OpenSeadragonZoomLevels ：允许限制图像缩放到特定的级别。
扫一扫
8394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
