vue 集成openSeadragon

野性酷女 2023-05-31 12:25 307阅读 1赞

### 环境准备 ###

npm i paper@0.9.25  
openseadragon.js(官方网站可下载)  
openseadragon-paperjs-overlay.js(官方网站可下载)

#### 在main.js 中导入需要的js ####

import "./assets/openseadragon"
    import "./assets/openseadragon-paperjs-overlay"
    import Paper from "../node_modules/paper/dist/paper-full.js"
    window.paper = Paper.paper;

#### 组件代码 ####

<template>
        <div style="height: 100%">
            <div id="contentDiv" style="height: 90%">
    
            </div>
            <button @click="pathDrag">画笔</button>
        </div>
    </template>
    
    <script>
      export default {
        name: "Demo.vue",
        data() {
          return {
            viewer: null,
            options: {
              id: "contentDiv",
              prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
              constrainDuringPan: true,
              showNavigator: true,
            },// openseadragon 参数配置
            brushState: true, //是否打开画笔
            hitItem: null,
            path: null,
          }
        },
        methods: {
          pathDrag() {
            this.brushState = true
            this.setMouseNavEnabled(false)
          },
          pressHandler(event) {
            this.hitItem = null;
            var transformed_point = paper.view.viewToProject(new paper.Point(event.position.x, event.position.y));
            var hit_test_result = paper.project.hitTest(transformed_point);
            if (hit_test_result && !this.brushState) {
              this.hitItem = hit_test_result.item;
            }
    
            if (this.brushState) {
              this.path = new paper.Path();
              this.path.strokeColor = 'green';
              this.path.strokeWidth = 10;
              this.path.fillColor = "rgba(100,150,185,0)";
              var imagePoint = this.toImagePoint(event)
              this.path.add(new paper.Point(imagePoint.x, imagePoint.y));
            }
          },
          dragHandler(event) {
            if (this.hitItem && !this.brushState) {
              var transformed_point1 = paper.view.viewToProject(new paper.Point(0, 0));
              var transformed_point2 = paper.view.viewToProject(new paper.Point(event.delta.x, event.delta.y));
              this.hitItem.position = this.hitItem.position.add(transformed_point2.subtract(transformed_point1));
              this.setMouseNavEnabled(false);
              paper.view.draw();
    
            }
            if (this.brushState) {
              var imagePoint = this.toImagePoint(event)
              this.path.add(new paper.Point(imagePoint.x, imagePoint.y));
              paper.view.draw();
            }
          },
          dragEndHandler(event) {
            if (this.hitItem && !this.brushState) {
              this.setMouseNavEnabled(true);
            }
            if (this.brushState) {
              this.path = null;
              this.setMouseNavEnabled(true);
            }
            this.brushState = false;
            this.hitItem = null;
          },
          toImagePoint(event){
            var webPoint = event.position;
            var viewportPoint = this.viewer.viewport.pointFromPixel(webPoint);
            return this.viewer.viewport.viewportToImageCoordinates(viewportPoint);
          },
          setMouseNavEnabled(val) {
            this.viewer.setMouseNavEnabled(val)
          }
        },
        created() {
        },
        mounted() {
          this.viewer = OpenSeadragon(this.options);
          this.viewer.addTiledImage({
            tileSource: "http://openseadragon.github.io/example-images/highsmith/highsmith.dzi",
          });
    
          var overlay = this.viewer.paperjsOverlay();
          new OpenSeadragon.MouseTracker({
            element: this.viewer.canvas,
            pressHandler: this.pressHandler,
            dragHandler: this.dragHandler,
            dragEndHandler: this.dragEndHandler
          }).setTracking(true);
    
          window.onresize = () => {
            overlay.resize();
            overlay.resizecanvas();
          }
        }
      }
    </script>

### 效果图 ###

目前实现的效果图(以上代码只是简单集成)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTU4NTk4_size_16_color_FFFFFF_t_70]  
Demo地址: [https://github.com/AHSQ/vue-openseadragon-demo][https_github.com_AHSQ_vue-openseadragon-demo]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTU4NTk4_size_16_color_FFFFFF_t_70]: /images/20230531/52189e8037854b47aa9af8afdc6ded4a.png
[https_github.com_AHSQ_vue-openseadragon-demo]: https://github.com/AHSQ/vue-openseadragon-demo