环境准备

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>

效果图

目前实现的效果图(以上代码只是简单集成)

Demo地址: https://github.com/AHSQ/vue-openseadragon-demo