PaperJS Affine Transformation


This afternoon I made a web tool for figuring out the parameters needed to apply an affine transformation to an image using PaperJS. You would do this if you had an image that you wanted to display on a web map (like a Google Map), but it wasn’t in the Mercator Web Projection. To use an affine transformation you need to fill 6 parameters: scale X, scale Y, shear X, shear Y, translate X, and translate Y. By changing those parameters, you can approximately stretch and size most images over most maps (if needed, you could also rotate the entire image using PaperJS). You can try it yourself with my example. In the current zoom level, the parameters that I find work pretty well are::

scale X: 0.7

scale Y: 0.7

shear X: 0.22

shear Y: -0.25

translate X: 26

translate Y: 126

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s