How to convert fabric points to OSD points?

altert / OpenseadragonFabricjsOverlay

fabricjs canvas overlay for openseadragon

BSD 3-Clause "New" or "Revised" License

70 stars 64 forks source link

How to convert fabric points to OSD points? #16

Open abhisb opened 7 years ago

abhisb commented 7 years ago

With reference to this question, how to convert fabric points to OSD points? I'm using tiled images and I have some fabric overlays. The position of the tiled images may change dynamically, so the fabric overlays are required to move along with the tiled images position. In this case I have to save the position of fabric overlay with respect to the tiled image and not relative to the viewer. I'm really stuck with this. Could you please help me finding a solution?

altert commented 7 years ago

with the new release positioning changes significantly, I would suggest trying out new release (0.4.0)

lesolorzanov commented 7 years ago

By happy accident I found out

var options = { //scale to the width of the image to get global point coordinates scale: 80000 } overlay = viewer.fabricjsOverlay(options);

This would allow me to put everything in image coordinates. What I dont know is what happens if the width is bigger than the height. My image is rectangular and the height is bigger than the width it is say 80000x90000, so it kind of works. But I would also love to know the relationship between coordinates in OSD and fabricOverlay

altert commented 7 years ago

Now coordinates are related to viewport coordinates, so the same approach is used. If you want scale correspond to image pixels you set scale to image width, as you already did, it would work if width is bigger as well.

sreekanthssr commented 5 years ago

function fabricToImagepoint(osdCanvas,selectedSlideSource,x, y) { var osdPoint = new OpenSeadragon.Point(x, y);

var viewportPoint = osdCanvas.viewport.pointFromPixel(osdPoint, true);
return selectedSlideSource.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y, true);

}

miordache93 commented 2 weeks ago

Hello,

I've been trying lately to make fabric canvas have the same aspect ratio as the image that's loaded by openseadragon. For some reason the fabric canvas is quite offset. The OxOy origins are different

Even forcing it this way: fabricCanvas.setDimensions({ width: api.viewport.getContainerSize().x, height: api.viewport.getContainerSize().y, })

  it dosn't work, i guess the scale  (scale: 1000) might be the problem...

  The grid, the lines and the circle are part of fabric layer.

Any thoughts?