Maintain overlay sizes on screen while OSD zooming

Hi, any idea how to maintain an object sizes on screen ( width & height ) for OSD overlay object while OSD is zooming in/out. For my case i am trying to keep Fabric JS object sizes on screen for the overlay.

What i have done is calculate a ratio of current OSD zoom level divided by the zoom level for 1:1 of image:viewport. And the result of those ratio used as denominator of a number that i just define, for example 500 or something. Here is the sample of code how i get the ratio for denominator:

self.zoomRatio = event.eventSource.viewport.getZoom() / self.viewer.viewport.imageToViewportZoom(1);

Thos zoomRatio i use as denominator for the sizes to produce new sizes of width & height.

As the result which is not really work well, i have a live demo at : http://biqdev.com/demo/bfabric-polygon/ , there is a red rectangle which i hope it will maintain the width & height on the screen while OSD zoom in/out.

[bayucandra]

You are right, actually i was put that way in my last option. However, since seem i can’t get more idea it is now my only option 😃. Thanks a lot for your response.

[iangilman]

Do you just want the events to pass through? If so, use pointer-events: none on the elements above.

Otherwise, if you want to catch them sometimes or process them somehow, how are you catching them? Have you tried using MouseTracker? Are you making sure that you are catching them?

As for triggering a click on the OSD, I’m not sure what the best way would be. You might experiment with events like mousedown and mousemove. You also might need to construct your event properly. You could also try fiddling with the viewer’s MouseTracker. You can also take a look at how we simulate clicks for our tests:

https://github.com/openseadragon/openseadragon/blob/master/test/helpers/test.js#L8