Image distortion on pure rotation

[neilyoung]

Pure rotation at least in my case visibly destroys the interior angles, the form factor and the covered area of a rectangle and makes it into something like a parallelogram.

Here a screenshot video of the case:

https://youtu.be/H4s7-tfH-ws

The same operation in Google Earth is not causing distortions. Sorry, could only record with my mobile:

https://youtu.be/vh7pB8owKLk

I have used your example, changed the bounds and position of the image as well as the image itself. Used Node 10 on macOS. The component was resolved like so, since the file approach for some reasons caused a runtime problem (see https://github.com/ChrisLowe-Takor/react-leaflet-distortable-imageoverlay/issues/8)

"react-leaflet-distortable-imageoverlay": "~1.0.0"

EDIT: I have patched the code a bit and removed the overlay._reset() from the rotateBy function. This visualizes the effect much better. It seems, the problem is bigger the more I zoom out. A console log shows, that the center coordinate, which is the center of the rotation, is not stable. It varies by several pixes. This could make the difference. The rotation math looks good to me.

https://youtu.be/WtJNyBx9Ogs

[neilyoung]

Your demo shows the same defect. If you rotate slowly right you will notice ~~a pulsation~~ an oszillation in width/height of the image. Maybe some rounding problem?

[neilyoung]

The original leaflet.distortableimage https://github.com/publiclab/Leaflet.DistortableImage doesn't have that problem.