search

publiclab / Leaflet.DistortableImage

A Leaflet extension to distort or "rubber sheet" images
https://publiclab.github.io/Leaflet.DistortableImage/examples/
BSD 2-Clause "Simplified" License
272 stars 285 forks source link

Controls detachable from image corners #941

Open sakhnik opened 2 years ago

sakhnik commented 2 years ago

Please describe the desired behavior. Would it be possible to detach the controls from the corners of the image and move to some specific points on the image? For instance, if there's a distinct feature on the map, say, intersection, it'd be much easier to just align that intersection on both the image and the map. Repeating this action for all the controls would allow quicker alignment of the image in comparison to when just working with the geography-featureless corners of the image.

Additional context (optional) The idea is taken from Custom Maps for Android: https://www.custommapsapp.com/ Just please let me know if it's already possible, but I missed it.

jywarren commented 2 years ago

oh this is pretty interesting. What if we thought about this differently -- that instead of 4 handles at corners, we have a general concept of handles which are like on a line from the image "center" - and we happen to default to 4 that match the corners. But, that if we want, we can add new handles at any arbitrary point, that can equally be used to rotate/scale.

The problem comes up when we're trying to warp, rather than rotate/scale. This would mean we'd need to develop a way to transform the movement of that one point into new positions for the 4 corners. We could say, well let's imagine our "extra" handle, as above, and then extrapolate the new positions of the corners in relation to the image "center". But... would it affect all 4 other handles? Or just the nearest? I'm not quite sure what the intuitive mental model is. And they have to be affected somehow, otherwise we need a full "mesh distort" that's beyond a perspective distortion's capability.

Sorry, i like the idea, i'm just trying to think through the implementation!!

sakhnik commented 2 years ago

Hi! I solved my particular task using Jupyter Lab: sakhnik/gpx-race. It's possible to define 4 points on the upright map and tie them to the GPS coordinates. This is just enough for the perspective transform. And the result is satisfactory. But as it turns out from the practice, this may be insufficient because of the image peculiarities. So I'm thinking of a way to define more than 4 points to tie to GPS, and to apply the piecewise affine transform instead. There are good illustrations about possible transforms here: Eric-Canas/Homography.js.

joric commented 1 month ago

Yeah it's not affine, I tried affine transforms here https://joric.github.io/maps/examples/remap/ and it doesn't match. It's some weird css matrix3d approximation of the perspective which is totally fake because we don't have Z and/or FOV. I actually would love to have affine option in distortableimage, probably it's pretty easy to do in css.