andfanilo / streamlit-drawable-canvas

Do you like Quick, Draw? Well what if you could train/predict doodles drawn inside Streamlit? Also draws lines, circles and boxes over background images for annotation.
https://drawable-canvas.streamlit.app/
MIT License
544 stars 83 forks source link

Translation of data coordinates #75

Closed chraibi closed 2 years ago

chraibi commented 2 years ago

First, thank you for this great software!

I'm trying to draw contours in the canvas, that I would like to export in the world coordinates.

With the following transformation:

X1 = np.array(objects['left']) - np.array(objects['x2'])
Y1 = h*fig.get_dpi() - (np.array(abs(objects['top'])) + np.array(abs(objects['y1'])))
X2 = X1 + np.array(objects['width'])
Y2 = Y1 + np.array(objects['height'])

I get the right results.

Screen Shot 2022-04-29 at 12 08 08

My question is: Why do I need to make the shift by x2 and y1? Any idea?

I share here a minimal working example

andfanilo commented 2 years ago

Hi @chraibi

Thanks for helping out in other issues by the way :) it's super helpful for me when I got other things to deal with!

To be honest I don't know why, this is imposed by the underlying JS library fabric.js. Maybe if you browse their doc you'll find out? I'm under the impression rectangle and objects are specified through x,y,height and width and maybe they followed a similar reasoning for line.

Have a nice day, Fanilo

chraibi commented 2 years ago

Hi @andfanilo, I found the fabric documentation not so helpful. A simple graph showing where are the relevant points defining a line would be really nice. Anyway, I found some pointers here. It seems that the centre of line is Left-Right. (not so intuitive I would say ^^ )

My solution is, then:

xA = obj_left + obj_x1
yA = h*fig.get_dpi() - (obj_top + obj_y1)
xB = obj_left + obj_x2
yB = h*fig.get_dpi() - (obj_top + obj_y2)

Scaling and Rotating need to be considered as well, but that should not be hard.

Screen Shot 2022-04-29 at 18 29 22

This issue may be related to #72