search

akcyp / react-lasso-select

React lasso tool for selecting area on images
https://www.npmjs.com/package/react-lasso-select
ISC License
22 stars 5 forks source link

Path Coordinates are not accurate #2

Closed shmuli9 closed 3 years ago

shmuli9 commented 3 years ago

Describe the bug When using the onComplete callback, the path returned is inaccurate. It is inaccurate as when I plot the points directly back onto the SVG they do not appear where I drew the lasso.

In the image below you can see where the lasso is and the red polygon is where the plotted shape appears on the SVG. (I have used a portal to the svgRef.current to append the polygon to the root SVG). Clearly, the shapes are nowhere near each other.

image

I have a suspicion this is something to do with the viewBox and maybe also the way the page is laid out (25%:75%).

To Reproduce Steps to reproduce the behavior: I'm not sure what is causing this issue, but I dont have any crazy CSS at work. The only possibly significant thing is that the container of the lasso has 75% of browser window width, and 100% of its parent container's height (which is basically 100% of the body height minus whatever space the header is taking up.

Expected behavior The path provided on onComplete should map identically to the lasso coordinates (the dashed polyline)

Desktop (please complete the following information):

Would appreciate some help with this. Thanks

shmuli9 commented 3 years ago

In case someone needs a solution, I found that the react-lasso instance (accessible via a ref) has a function getPolylinePoints() which does exactly what I needed

akcyp commented 3 years ago

Hi @shmuli9 The point list returned by the onComplete / onChange callback is not the same as the svg points inside the component. The values returned by onComplete / onChange are previously scaled using the original width and height of the image - this makes the points relative to the image passed by src parameter. I would suggest creating a separate svg element with the viewBox parameter equal to 0 0 ${imgWidth} ${imgHeight}. Check out this example: https://codesandbox.io/s/react-lasso-select-issue2-h92hn?file=/src/App.tsx Hope this helps!

shmuli9 commented 3 years ago

Thank you, your example is perfect