Openseadragon图像拖动多个画布

Question

我们有一个在openseadragon上编码的查看器。它具有放大缩小主页和旋转功能。我们还在此查看器上添加了一些自定义透明画布，以便在该图片上绘制一些图形。他们工作正常，但我们不能拖动图片，也无法获得这些多画布上的图片的div坐标。

我们如何能够在此多画布上触及鼠标移动或单击并拖动事件。

谢谢大家的帮助。

示例代码在这里：

<div class="container"> 
<div class="area"> 

    <div id="viewerImage1" 
     class="openseadragon"> 
     <script type="text/javascript"> 
      var meta = null; 
      var viewer = OpenSeadragon({ 
       id: "viewerImage1", 
       prefixUrl: "/openseadragon/images/", 
       tileSources: { 
        type: 'image', 
        url: '/openseadragon/images/example-images/sample.jpg' 
       } 
      });   
     </script> 
    </div> 
    <canvas id="canvasDrawArea01" class="canvas" width="300" height="250" style="cursor: move;"></canvas> 
    <canvas id="canvasDrawArea02" class="canvas" width="300" height="250" style="cursor: move;"></canvas> 

</div> 
</div> 

Answer 1

建议尝试帆布覆盖插件：

https://github.com/altert/OpenSeadragonCanvasOverlay

...它应该有这些问题的帮助。让我知道事情的后续！