1

We have a viewer with coded on openseadragon. It has zoomin zoomout home and rotate functions. We also add some custom transparent canvas on this viewer for draw some shapes on that picture. They works fine but we cannot drag that pictures and also cannot get div coordinates that picture on these multi canvas.

How can we reach mouse move or click and drag events on this multi canvas.

Thanks all for helping.

Example code here:

<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>
ersan
  • 11
  • 2

1 Answers1

0

I recommend trying the canvas overlay plugin:

https://github.com/altert/OpenSeadragonCanvasOverlay

… it should help with these issues. Let me know how it goes!

iangilman
  • 2,144
  • 1
  • 13
  • 16