openSeadragon的用法

项目中openSeadragon的用法

这是官方文档

1、先创建一个viewer对象

viewer = OpenSeadragon({
          id: that.openSeadragonId, // 根据id绑定dom对象
          showNavigator: true, // 是否展示图像导航栏控件 (也就是右下角的玻片)
          navigatorPosition: 'BOTTOM_RIGHT', // 导航栏控件位置
          navigatorSizeRatio: 0.1, // 玻片的展示倍率
          prefixUrl: process.env.VUE_APP_STATIC_OPENSEADRAGONICONS, // 图像金字塔文件夹位置
          sequenceMode: true, // 多图
          tileSources: tileSources
          // debugMode: true //开启调试模式
          // maxZoomPixelRatio: 0.5,
          // zoomInButton: "zoom-in", //放大
          // zoomOutButton: "zoom-out", //缩小
          // homeButton: "home", //恢复默认
          // fullPageButton: "full-page", //全屏
          // nextButton: "next", //下一张图片
          // previousButton: "previous", //前一张图片
          // visibilityRatio: 0.5,  //图片在框内的最小比例
          // constrainDuringPan: true //管拖拽,true就不能拖拽了
        })

2、通过addHandler自定义方法。

        viewer.addHandler('page', (event) => {
          that.index = event.page
          that.handleChangeSample()
        })

本项目中是定义了一个切换下一页的方法

3、一些常用方法

viewer.viewport.zoomTo(2)  //缩放到指定的比例

const point = viewer.viewport.imageToViewportCoordinates(x, y) //将图像坐标转为viewer视图坐标
viewer.viewport.panTo(point) // 将视图平移到给定的点。point (x,y)

4、点击小图定位到源视图位置

    // 点击小图时定位到指定位置，绑定在template中的image图像上的事件
    handleImageClick(picture) { // BY LCW
      const rectElementId = picture.imgName
      const split = rectElementId.split('_')
      const x = split[0] // 1、根据图片名获取左上角的x y坐标
      const y = split[1]
      const point = viewer.viewport.imageToViewportCoordinates(x, y) //将图像坐标转为viewer视图坐标
      viewer.viewport.panTo(point)  将视图平移到给定的点。
       if (this.zoomData == '') { // 若用户没有选择值, 则给他默认值 
        this.zoomData = '40px'
      }
      viewer.viewport.zoomTo(this.zoomNum) 缩放到指定的比例
     
    },

5、切换下一页viewer视图的实现方法

根据父组件传入的sampleIds，渲染WSI展示页面

// 接收父组件的数据
  props: {
    sampleIds: { // 样本id 可包含多个样本id
      type: Array,
      default: () => new Array()
    },

// 给定事件添加事件处理程序
        viewer.addHandler('page', (event) => {
          that.index = event.page
          that.handleChangeSample()
        })

handleChangeSample()函数包含 根据sampleId初始化

这里的page事件是openSeadragon.js中定义好的事件，原码中的函数是goToPage

以下是处理多选的函数：


6、将图像信息写在视图中

const eles = openSeadragonHtmlElements.addElement({
                  id: _.imgName,
                  element: element,
                  x: _.location[0] * rate,
                  y: _.location[1] * rate,
                  width: _.location[2] * rate,
                  height: _.location[3] * rate
                })
                that.initOpenSeadragonRects() //自己封装的方法，将每个细胞的数据加入到页面中

7、圈画功能
思路通过openseadragon的canvas-click事件能够为我们提供web窗口的坐标
↓
// 将其转换为视口坐标，OpenSeadragon坐标的通用语言
const viewportPoint = viewer.viewport.pointFromPixel(webPoint)
↓
// 从视口坐标转换为图像坐标
const imagePoint = viewer.viewport.viewportToImageCoordinates(viewportPoint)
↓
// 生成标注信息，即裁剪出的图像的坐标。固定大小150px

      const length = 150
      const that = this
      const width = length
      const height = length
      const halfLength = length / 2
      const x = imagePoint.x - halfLength < 0 ? 0 : imagePoint.x - halfLength
      const y = imagePoint.y - halfLength < 0 ? 0 : imagePoint.y - halfLength
      const location = [x, y, width, height]

↓
判断选中的tag是什么类别，就将这个圈画的图片加入到对象的pictureList中
↓
请求接口裁剪出数据，返回pic的路径，前端加入到对应的pictureList中