OpenSeadragon学习笔记

最新推荐文章于 2024-08-16 09:43:56 发布

吴杼恩

最新推荐文章于 2024-08-16 09:43:56 发布

阅读量6k

点赞数 5

分类专栏：常用插件

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/80902726

版权

常用插件专栏收录该内容

12 篇文章 0 订阅

订阅专栏

模拟：https://codepen.io/iangilman/pen/gpejpJ

OpenSeadragon是一个可以显示多层图片（可放大缩小）的Web库，基于JavaScript，支持桌面和手机。

这里有两种方法创建OpenSeadragon对象
var viewer = new OpenSeadragon.Viewer(options);
var viewer = OpenSeadragon(options);

var 	var _tilepath = sliceurl+"/"+dv_image_info.docObject.acid+"_"+dv_page.page1+".xml";
var viewer = OpenSeadragon({
	                id: "dvviewer",
	                prefixUrl: "images/",
	                tileSources: _tilepath,
	            });

之后调用方法可以用 “viewer.viewport.method“ （method为官网viewerport中的method方法）

如：viewer.viewport.getBounds() //获取当前边界

OpenSeadragon.Options

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

更多具体内容
http://openseadragon.github.io/docs/OpenSeadragon.html#.Options
图片准备

OpenSeadragon支持很多图片协议和格式，通常这些图片都是由很多图片的切片组成的，例如一张很大的图，需要剪裁成很多小图，按照一定的命名和存储规则存放。

_viewer = OpenSeadragon({
prefixUrl: “images/”,//是装有各种按钮名称的文件夹images地址，这个文件夹是官方下载包里提供的
tileSources: _tilepath,//所要显示源图片的信息
});

OpenSeadragon提供了几个限制最小和最大缩放范围以及缩放范围的选项,这些特性通常通过各种选项的组合来控制。
http://openseadragon.github.io/examples/ui-zoom-and-pan/

OpenSeadragon.Viewport.

zoomTo(zoom, refPointopt, immediatelyopt)):缩放到指定的缩放级别.[zoom:缩放到缩放等级;refPoint(OpenSeadragon.Point}:保持在相同屏幕位置的点。默认设置为viewport center;immediately:是否马上执行 true/false;]
zoomBy(zoom):缩放到指定的缩放级别[zoom:缩放到缩放等级];
fitBounds(bounds, immediatelyopt):使viewport缩放和平移，以便指定的边界在viewport中占用尽可能多的空间。注意:该方法忽略了约束(minZoom, maxZoom和visibilityRatio)。[bounds：界线；immediatelyopt：immediately=false, constraints=false]
getBounds(current):返回viewport坐标中可见区域的边界。
getHomeBounds():返回viewport坐标中的home边界。
pointFromPixel(Point)：将原始坐标转为视图坐标
deltaPixelsFromPoints:将视图坐标转化为像素坐标
deltaPointsFromPixels：将像素坐标转化为视图坐标
viewportToImageCoordinates(Point)：将视图坐标转为图像坐标。注意这里的Point格式应为{x:0,y:0}，在官方说明中，此处应该传递的是openseadragon.Point，如果只使用坐标转化，只需要按照{x:0,y:0}传入即可。
---------------------

openseadragon已经集成了一些方法，比如两点间距离的计算。

new OpenSeadragon.Point(x,y).method

例子：
如果要监听点击事件我们可以这样写，这个也是官方提供的案例。

viewer.addHandler（'canvas-click'，function（event）{
    // canvas-click事件为我们提供了Web坐标中的位置。
    var webPoint = event.position;
 
    //将其转换为视口坐标，OpenSeadragon坐标的通用语言。
    var viewportPoint = viewer.viewport.pointFromPixel（webPoint）;
 
    //从视口坐标转换为图像坐标。
    var imagePoint = viewer.viewport.viewportToImageCoordinates（viewportPoint）;
 
    //显示结果
    console.log（webPoint.toString（），viewportPoint.toString（），imagePoint.toString（））;
}）;

来源：
https://blog.csdn.net/firstblog/article/details/90665415