[ Distort or shear or skew an image - Raphael, JavaScript or PHP ]

I am trying to distort/shear/skew an image something like this:

I am using Raphael Javascript Library to do it. But i found Raphael very tough. I saw some websites that are using Raphael Library for same.

Following code it tried:

<svg height="90" width="120" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <desc>Created with Raphaël</desc>
                        <defs>
                        <pattern patternTransform="translate(0,0)" width="120" height="90" patternUnits="userSpaceOnUse" y="0" x="0" id="r-4133963223e7aa40438195ae1cdf6892dc">
                    <image height="90" width="120" xlink:href="images/photo2.jpg" y="0" x="0"></image>
                    </pattern>
                        </defs>
                        <path style="fill: url("#r-4133963223e7aa40438195ae1cdf6892dc") none;" d="M0,30L240,0L240,50L0,82L0,10" stroke="none" fill="url(#r-4133963223e7aa40438195ae1cdf6892dc)"></path>

                        </svg>

Now, Can anybody guide me "how to do it". Or is there any alternative to do the same.

Answer 1

If you can, consider using the new CSS3 transform first. It's very simple and should do what you need pretty well.

Second, think about a server side library. PHP GD seems to support affine transforms, and wikipedia can help with how to use them for shear mapping.

Third, you can also implement shear mapping in Javascript. (I had to do this before though; I'll publish it if it turns out this is helpful) This only took about ~150 loc but it is considerably more difficult than the first solution.

Answer 2

The matrix associated with an element need to changed and reapplied for any set of transformations. This is in particular required to shear element using Raphael due to lack of that part of the API.

Among the matrix properties of a, b, c, d, e and f, we need to change b and/or c to shear along y-axis and/or x-axis, respectively.

var paper = Raphael(0,0,500,500),
    element = paper.rect(100,100,200,100).attr({fill: "#ff0000"}),
    // Transformation matrix of the element is retrieved
    matrix = element.matrix;
// Shearing factor along y-axis set (work on matrix.c to shear along x-axis)
matrix.b = 0.1;
// Re-apply the matrix to the element via "transform" property.
element.attr({transform: matrix.toTransformString()});

Hope this helps.