Following up from my last update about how the projective transformations were possible in the current Mapknitter tool, a live demo for projective transformations can be viewed here: http://128.199.208.55 . The github code: https://github.com/anishshah101/ImageDistortLeaflet/blob/master/DivDistort2.html
The corners can be clicked and dragged to see the effect of distortions.
These transformations are different from the one taking place through Cartagen in the existing Mapknitter tool. Instead of the image getting subdivided into triangles, the image gets transformed using the matrix3d property of webkits. Refer here for how this works. The transforms are applied on a div like the below image:
While we distort the image, the position of corners is updated using the padding of the image from the parent div.
The transformations are not entirely smooth as now and behaves weirdly when values lose meaning in the code. Will need to modify some code to achieve that.
Things to be done:
1) Since the transformations are taking place on a div, matrix3d class can be used but the same can't be used on an image inside the canvas. To implement these transitions on a canvas, I am working on 2 possibilities:
1.1) By creating DOM elements on a canvas (Refer here) and then transforming them.
1.2) By using WebGL on canvas.
2) Connecting the canvas with Leaflet.js.
7 Comments
Wow!
If you can implement this using WebGL on Canvas, I think you will see a huge performance increase on light weight systems such as netbooks and mobile devices, which actually make good use of WebGL as opposed to Javascript running on the CPU.
In an email, you mentioned that you found alternative sources that helped you come up with your current implementation. Could you update this note with links and references to the alternative sources you found?
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
Not all devices support WebGL -- my old netbook did not, for example. Are we concerned about that?
But this is done in CSS3, right? That's perhaps even better, but what browsers and browser versions are supported?
This looks great. You should make a function that accepts (x1,y1,x2,y2) for positioning the image. That'll make integration with Leaflet easier.
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
Yes this is done in CSS3. All the latest versions of desktop browsers are supporting it but it is not functioning correctly on Iphone 5 browser so I am guessing it won't work correctly on other phone browsers as well.
What values are you referring to as x1, y1, x2, y2?
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
Anish - just thinking of how you'll integrate with Vidun; those values (or rather lat1,lon1,lat2,lon2) will be part of the constructor, like
DistortableImage.new(1,2,3,4)or something.I'll try it on iOS 6... what iOS are you using? This seems to indicate that matrix3d is supported: http://stackoverflow.com/questions/17870192/how-to-use-3d-matrix-to-create-suck-effect-in-css but maybe it requires a -webkit prefix?
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
I had tested it on iOS 7.1.1. The webkit prefix is already there in the code. It still isn't working as that on a desktop browser.
Reply to this comment...
Log in to comment
Just to clarify, the four points x1,x2,x3,x4 are the four points of the "aerial image" that is overlay, specifically in cartagen it is the pixel coordinates that we are using and not actual lat/long. So my work is mostly based on using pixel coordinates, so conversion from lat/long to pixels is done as required.
Reply to this comment...
Log in to comment
Yes. And soon as possible, we should begin using Leaflet for both image instantiation (based on anish's code) as well as xy/latlon conversions. Thanks!
Reply to this comment...
Log in to comment
Login to comment.