Fabric overlay not scaling with Openseadragon image #64

miordache93 · 2024-10-31T15:14:42Z

Hello,

I've been trying to use this plugin into my app, for adding some markups on top of the Openseadragon canvas.
Given the fact i couldn't managed to position them right using top, left properties I started thinking that the fabric overlay isn't actually well positioned and neither scaled. Therefore i started with a simple example rendering a rectangular.

In first picture I'm using positioning like (0,0) with a width of 1000, which somehow fits the width entirely of my canvas.
On second example I've used fabric method centerObject and i can see that it moved it totally wrong.
On the last example I've removed centerObject method and just set the positioning to (0,0) but gave the width and height of the canvas for the rectangular object. What i can see is that the overlay is much bigger than the image rendered inside Openseadragon canvas and much more offset.

I've some parts of my code for example purpose. Any advice?

` const api = new OpenSeadragon.Viewer({
...options,
loadTilesWithAjax: true,
tileSources: {
...(options.tileSources as OpenSeadragon.TileSourceOptions),
...getCustomTileSources(viewerData),
getTileUrl: getTileUrl(
{
...data,
study: {
...data?.study,
...study,
slides: study?.shuffledSlides || data?.study?.slides || [],
},
} as ImageViewerApi,
state.slidePosition
),
},
element: refElem.current as unknown as HTMLElement,
}) as OpenSeadragonViewer;

const fabricOverlay = api.fabricjsOverlay({ scale: 1000 }) as any;
const fabricCanvas = fabricOverlay.fabricCanvas() as fabric.Canvas;

 const react = new fabric.Rect({
    width: fabricCanvas.getWidth(),
    height: fabricCanvas.getHeight(),
    left: 0,
    top: 0,
    fill: 'red',
  });

  // fabricCanvas.centerObject(react);
  fabricCanvas.add(react);

  fabricCanvas.renderAll();

`