OpenSeadragon 实战系列文档翻译

序言

　　这一章节主要是viewer中options的翻译，如果你查看官方文档你会找到下图所示

　　在这里你会看到基础篇用到的三个属性：id，prefixUrl，titleSources。为了更好的运用这些属性，我自己做了一个文档翻译，以便大家查阅。

文档翻译

id:装载到的容器 element:同上（若两者同时存在，element具有最高优先级） titleSources:图片源//详细描述请先自行参考官网，这个属性配置项比较多 prefixUrl:OpenSeadragon自带图表样式//工具所需用到图表样式路径 navImages://自定义图标，通过上诉属性映射静态资源图标 debugMode: true或false 开启debug模式 debugGrolor: ['#000000']//debug颜色 blendTime:0 初始化白屏时间 alwaysBlend:true,//当图片缩小时，是否显示白色遮盖图片 autoHideControls:true//当鼠标不在图片上时，是否自动隐藏导航视图和缩略图 immediateRender:false//初始化渲染，是否自动选择最佳分辨率图片显示，移动端最好开启 defaultZoLevel:0//初始化放大倍率，默认为0，自动适应元素 opacity：隐藏和显示，1显示，0全部隐藏 preload:false,Default switch for loading hidden images (true loads, false blocks)//不明白 cpositeOperation:'sourceover', 'sourceatop', 'sourcein', 'sourceout', 'destinationover', 'destinationatop','destinationin', 'destinationout', 'lighter', 'copy' or 'xor' //任取其一，不明白有啥作用 placeholderFillStyle:'#FF8800'//初始化时，图片未载入现实的样式，默认是白色，此属性可选的方式有 String | CanvasGradient | CanvasPattern | function degrees:90,//图片旋转角度 flipped:true//镜像翻转 minZoLevel:null,//最小放大倍数 maxZoLevel:null,//最大放大倍数 heFillsViewer:false,//使主页按钮填满查看器//没看到效果 panHorizontal：true //是否允许水平移动 panVertical：true //是否允许垂直移动 constrainDuringPan：false//官方未说明 wrapHorizontal:true,//水平复制图片，适用于圆形图片 wrapVertical:true,//垂直复制图片，使用于圆形图片 minZoImageRatio:0.9/01/最小缩放倍率，窗口的百分比 maxZoPixelRatio：1.1//最大放大倍率，窗口的百分比 smoothTileEdgesMinZo:1.1,//放大到最大倍率后，容器的表现形式，是否为平滑过渡，还是由原图逐渐放大到容器的宽度，这个属性会影响性能，建议使用Infinity将此属性关闭，且IOS下，设置此属性无效 iOSDevice:false //设置是否运行在ios设备上，以避免一些表现形式得不同，如果确认将在ios下运行，设置为true，不确认得时候忽略此属性 autoResize:true,//设置是否自动伸缩，若容器得宽度被放到或者缩小，则图片会自动重新使用 preserveImageSizeOnResize:fasle// 设置图像是否保留原图比例大小，以确保当容器被放大或者缩小时，图片被拉伸，当上一属性为true时起作用 minScrollDeltaTime:50,//倍率切换时间，越大则倍率切换时越慢 pixelsPerWheelLine:40 //移动端滚动像素值，每次滚动移动得像素值 pixelsPerArrowPress：40 // 每按下浏览器进度条的向上或向下按钮，移动的像素值 visibilityRatio:0.5,//01之间，0代表图片可完全拖出显示框，1代表图片一点也不可以拖出 imageLoaderLimit：0 //设置同时请求的图片数量，默认0允许浏览器根据浏览器策略允许并生成最大数量的图像请求。 clickTimeThreshold:300 //鼠标单击一下 多长时间内即被视为点击事件，比如长时间按住鼠标左键不放，如果超出这个时间，则不会被视为点击事件clickDistThreshold: 5 //鼠标左键落下至弹起这一段时间内，鼠标移动多少距离，将被视为一次点击事件，一般和上边的时间同时设置才会看到效果 dblClickTimeThreshold：300 //双击事件，两次单击的时间间隔为多少毫秒内，及会被视为双击事件 dblClickDistThreshold：20 //两次双击的时间内，鼠标移动多少距离内，即被视为双击事件 springStiffness:6.5, //缩放过渡效果，，值越小，则动画越趋于柔和 animationTime：5 //放大或缩小动画过渡的时间，这个值越小，过渡快 gestureSettingsMouse: gestureSettingsTouch： //触摸屏事件 同上 gestureSettingsPen： //笔触事件 同上 gestureSettingsUnknown： //未知设备 同上 zoPerClick:8, //点击一下 放大倍率 设置为1 则代禁用单击事件 同gestureSettingsMouselickToZo zoPerScroll:1 //滚轮放大倍率，设置为1 则代表禁用滚轮事件 同gestureSettingsMouse.scrollToZo zoPerSecond:1, //结束单个缩放动画的秒数 showNavigator:true //是否显示导航缩略图 navigatorId： //导航所在容器ID 如果指定则会忽略导航上所有的属性 使用自定义的css navigatorPosition：'TOP_LEFT'，'TOP_RIGHT'，'BOTT_LEFT'，'BOTT_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 //基础控件的展示与隐藏 showZoControl:true //显示放大和缩小按钮 showHeControl：true //显示回到主位置按钮 showFullPageControl：true //显示全屏按钮 showRotationControl:true //显示左旋转和右旋转按钮 只有在支持的浏览器上才可以正常显示 showFlipControl：true //显示镜像翻转按钮 navigationControlAnchor: 'NONE','TOP_LEFT','TOP_RIGHT','BOTT_LEFT','BOTT_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:, zoInButton：'' //自定义放大按钮ID zoOutButton：'',//自定义缩小按钮ID heButton:'',//自定义主位置按钮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请求头

结束

　　我已经根据官方的文档实际操作过这些属性，有些属性没有被测到，有些属性是用了也没有任何变化，我在注释中都说明了，这些属性已经可以满足大部分的需求了，如果你测出了一些属性，也可以分享给大家。这些属性请尽可能多的自己实际应用一下，以便理解。现在我们已经可以操作静态的图像了，接下来会介绍dzi图片的生成规则与命名方式

上一篇：Qt Creator按顺序编译多个子项目

下一篇：C++“不能实例化抽象类”错误

---

OpenSeadragon