OpenSeadragon
1. OpenSeadragon初始化
Openseadragon 是一款基于 Javascript 的浏览器端 Deep Zoom 图像在线预览工具，它可以同时支持桌面端和移动端。由于其基于 New BSD 开源协议，所以我们可以轻松的使用它来构建我们自己的 Deep Zoom 图像预览工具。我们可以登录 OpenSeadragon 官网来获取它的相关信息。
编写一个简单的工具来预览之前使用DZC生成的 Deep Zoom 图像。在开始工作之前，需要下载 OpenSeadragon 的相关类库。
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 参数配置
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配置解释
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
