Viewer 对象还为我们提供了操作导航栏控件的相关方法,通过这些方法我们可以显示或隐藏导航栏,为导航栏增加或移除相应的控件。
setControlsEnabled(true) :显示或隐藏导航栏控件。支持菊花链。该函数会触发“controls-enabled”事件。
参数 | 类型 | 属性 | 默认值 | 描述 |
---|
true | Boolean | | | 为 true 时显示,为 false 时隐藏。 |
clearControls() :清除导航栏控件。支持菊花链。
areControlsEnabled() :获取导航栏控件显隐状态。返回值为布尔类型。
bindSequenceControls() :当 sequenceMode 打开时绑定上一张下一张控件。支持菊花链。
bindStandardControls() :绑定标准控件。支持菊花链。
addControl(element, controlOptions) :为 Viewer 添加导航栏控件。(参数不详)
removeControl(element) :移除 element 所对应的导航栏控件。支持菊花链。(参数不详)
在创建 Viewer 对象时,OpenSeadragon 同时为我们创建了内置的 Viewport 对象。通过 Viewport 对象提供的相关方法,我们可以对预览的图像本身进行相关操作,也可以对相关坐标进行相应的转换。
通过 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 | | | 内容的大小,以内容单位表示 。 |
根据 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(目标位置)。 |
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 | | | |
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 方法来激活相应的鼠标追踪器。
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 :允许限制图像缩放到特定的级别。
Openseadragon 是一款基于 Javascript 的浏览器端 Deep Zoom 图像在线预览工具,它可以同时支持桌面端和移动端。我们可以轻松的使用它来构建我们自己的 Deep Zoom 图像预览工具。
OpenSeadragonDeltaEMap
该插件有助于使用DeltaE标准评估targetscan。 对于输入,它使用兼容DeltaE的JSON,其中包含目标坐标,大小,预期和测量的颜色数据等。 观察和评估的数据投影在与鼠标位置相关的覆盖图中。
将软件包安装为npm软件包。 在dist文件夹中提供了umd格式的文件(需要读取或仅读取了该文件),并在module文件夹中提供了es-module来进行导入。 在两个文件夹中都有一个样式表。
当作为节点模块安装并打开openSeadragon时,此插件在查看器中以'deltaEMap'形式提供。
使用传统的视图设置OpenSeadragon,在平移或调整大小时,叠加层和图像将不会以相同的方式移动。 为了获得一致的视图,建议如下所示的绝对视图设置。
推荐的设置:
const viewer = OpenSeadragon({
OpenSeadragon是一个开源的图像浏览器插件,可以用于在Web浏览器中显示高分辨率图像。
使用OpenSeadragon需要先在HTML文件中引入OpenSeadragon的库文件:
<script src="https://cdn.jsdelivr.net/npm/openseadragon@2.4/build/openseadragon/openseadragon.min.js"...
1.首先去openseadragon官方文档,地址:https://openseadragon.github.io/,如图下载
下载完成之后会有一个压缩包openseadragon-bin-2.4.2.zip,将压缩包解压拿到一个文件夹,文件夹里面这两个是需要的
,其他忽略。
2:http://www.softsea.com/download/Deep-Zoom-Composer.html这个网址下载Deep Zoom
按提示安装在自己电脑内就有一个程序:
,使用链接如下:https://blog.cs
使用openseadragon实现大图展示目标:使用插件制作大图展示代码部分工具应用部分
目标:使用插件制作大图展示
需要用到js插件: openseadragon.js,需要用到切图工具:Deep Zoom Composer
<!-- 我是简单易懂的html-->
<div class="content" >
<div id='openSea...
推荐开源项目:OpenSeadragon - 超级视觉体验的JavaScript图像查看器
项目地址:https://gitcode.com/openseadragon/openseadragon
1、项目介绍
OpenSeadragon是一款强大且开源的Web图像查看器,基于纯JavaScript实现,可以提供无缝的缩放和导航功能,为用户提供如同海洋深度探索般的浏览体验。该项目致力于让展示高分辨...
OpenSeadragon 是一个用于展示高分辨率图像的 JavaScript 库,支持多种方式浏览大型图像,包括缩放、平移、旋转等操作。它提供了许多实用的方法,包括:
viewport.panTo(point): 将视图平移到给定的点。
viewport.zoomTo(zoom): 缩放到给定的比例。
viewport.goHome(): 返回初始视图。
viewport.applyConst...
Deep Zoom是一种技术,可以让用户在高分辨率图像上进行流畅的缩放和浏览,而不会出现延迟或失真。以下是一个Deep Zoom示例:
1. 打开Microsoft Silverlight Tools for Visual Studio并创建一个新的Silverlight项目。
2. 添加一个大型图像文件(至少有10000 x 10000像素)到项目中。这可以是任何你喜欢的图像,例如地图、艺术品或照片。
3. 在Visual Studio中,右键单击图像文件并选择“生成Deep Zoom图像”。
4. 在“生成Deep Zoom图像”对话框中,选择输出文件夹和文件名,并设置图像质量和缩放级别。
5. 单击“生成”按钮,等待Deep Zoom图像生成完成。
6. 在项目中添加一个新的Silverlight用户控件,并在控件中添加一个Deep Zoom对象。
7. 设置Deep Zoom对象的属性,例如源图像路径、缩放级别和视图矩形。
8. 运行项目并尝试使用鼠标滚轮或手势缩放和浏览Deep Zoom图像。
通过使用Deep Zoom技术,用户可以轻松地在大型图像上进行缩放和浏览,而不会受到性能问题的影响。这对于需要查看高分辨率图像的应用程序非常有用,例如地图浏览器、艺术品展示和照片库。