openseadragon实战系列其他属性的使用（有你想要的干货）

最新推荐文章于 2024-09-11 13:00:10 发布

原创最新推荐文章于 2024-09-11 13:00:10 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#openseadragon #深度缩放图形

openseadragon 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了OpenSeadragon中viewport的使用方法，包括如何调用其内置方法；详细讲解了Point类及其应用；探讨了viewer的常用方法如addOverlay和addHandler，特别讲解了addHandler的事件监听；最后，阐述了MouseTracker的构造和使用，包括监听区域设定和事件处理。文章提供了实用的代码示例，帮助读者深入理解OpenSeadragon的关键功能。

viewport的使用

我们打开openseadragn的官网，可以找到下图所示的viewport

点开viewport，你可以看到很多viewport的方法

那么如何使用viewport呢?在基础篇中的示例代码中，我们定义了viewer

var viewer = OpenSeadragon({
            id: "openseadragon1",
            prefixUrl: root + "/public/images/icon/",
            tileSources:{
                tileSource:root + "/api/get/ali/image",
                loadTilesWithAjax:true,
                success:function(res){
                    console.log(res)
                },
                error:function(err){
                    console.log(err)
                }
            },
        });

之后要想使用viewport可以使用这种方式

viewer.viewport.method

将method替换成官网viewerport中的method方法即可，是不是很简单，常用的方法有

pointFromPixel(Point)：将原始坐标转为视图坐标

deltaPixelsFromPoints:将视图坐标转化为像素坐标

deltaPointsFromPixels：将像素坐标转化为视图坐标

viewportToImageCoordinates(Point)：将视图坐标转为图像坐标

getBounds：获取当前边界

注意这里的Point格式应为{x:0,y:0}，在官方说明中，此处应该传递的是openseadragon.Point，如果只使用坐标转化，只需要按照{x:0,y:0}传入即可。

Point的使用

在上述的pointFromPixel方法中，你可以找到关于openseadragon.Point的属性及方法，如下图

我们可以看到openseadragon已经集成了一些方法，比如两点间距离的计算。要想使用Point也很简单

new OpenSeadragon.Point(x,y).method

viewer常用的方法

点开官网中viwer的说明，我们可以找很多方法。当然我们一般使用的是addOverlay和addHandler，关于addOverlay相信各位在其他的博客中已经找到不少了，接下来我只简单地说明一下addHandler的使用。在viewer的说明页面你可以在右侧找到所有可以监听的事件

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

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（））;
}）;

其他事件的监听类似。当然openseadragon也提供关于鼠标事件和键盘事件的简化处理类：MouseTracker。在官网中也可以找到说明：http://openseadragon.github.io/docs/OpenSeadragon.MouseTracker.html

MouseTracker的使用

MouseTracker是一个构造函数，需要你指定监听的区域，当然你也可以设置点击多久被视为单击事件，双击间隔多久被视为双击事件等等。创建一个MouseTracker也很简单

  var mouse = new OpenSeadragon.MouseTracker({
            element:'openseadragon1'
        });

其中element是要监听区域的ID，之后你就可以使用MouseTracker的各种方法了。

结束

因为openseadragon所提供的API太多，所以这里也没有办法全部介绍，只把最常用的一些放上来了。关于viewer其中可以做的还有很多，比如监听用户左键落下后，不允许拖动画布，可以直接在监听里写

viewer.panVertical = false;
viewer.panHorizontal = false;

下一章将会介绍openseadragon官方提供的插件，以及颜色插件的使用。