The working demo of the latest version of ImageDistortion can be viewed here: http://128.199.208.55/
You can click and drag any control point to distort the image. The code can be viewed here: https://github.com/anishshah101/ImageDistortLeaflet
On Zooming, the image behaves weirdly, that still remains to be corrected.
Important changes/additions in plugin:
1) Extended the L.ImageOverlay class to L.DistortableImage: . This was done to add the DOM attribute id to make every image unique.
2) Extended the L.Marker class to L.ImageMarker: .This was done to make the image control points draggable and clickable by default. Also, the riseonhover property provides it with a high z-index value so that it remains on top of everything else for selection. Any custom image can be used as an image marker.
Things which still remain to be done:
1) Correcting the zoom event by preserving the last state of the distorted image.
5 Comments
Clever. Not sure where you intend to take this experiment, but grab-n-drag the photo and having a semi-transparent mode (to see the map below the photo) would be a nice effect for manipulating the corners to find a match. Cheers, Dave
Reply to this comment...
Log in to comment
Looking great! If you add basic image dragging, you have most of the base functions done! I agree with Dave too, the transparency, outline mode, and "rotate/scale" modes are next. Great work!
I did see a weird bug after 3-4 distorts:
Reply to this comment...
Log in to comment
Excellent. And I see that it works fairly well in iOS.
Reply to this comment...
Log in to comment
I look forward to seeing this work with scaling, but it is coming along very nicely.
I agree that there should be a way to drag the whole image. In order to move the image right now, one would have to move each of the four corners to it's final location. It would be far easier to drag the image itself to the final location, and then adjust the corners.
Since the example site is client-side only and the HTML, JS, CSS are on Github, this could be hosted directly out of Github Pages: https://pages.github.com/
Here is an example of github pages. Code repo: https://github.com/btbonval/3D-US-Data-Map, Github page: http://btbonval.github.io/3D-US-Data-Map/Index.html
The source code for index.html in the repo (https://github.com/anishshah101/ImageDistortLeaflet/blob/master/index.html) does not look like the source code for the index.html that you are hosting (http://128.199.208.55/index.html). Have you commit and pushed all your changes?
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
I was unaware of the bug before Jeff mentioned but it is occurring each time after a few distorts. I am not sure why that is happening because the same piece of code is running each time. Will try to sort that out.
Will work on transparency, scaling and image dragging once the zoom event and the bug gets rectified.
@btbonval - thanks for pointing out github pages. Wanted to know if it has any advantage over usual VPSs? Btw the source code for index.html on the server corresponds to the file 1.html on the github repo: https://github.com/anishshah101/ImageDistortLeaflet/blob/master/1.html . The repo is slightly unorganized, will sort that out as well.
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
Login to comment.