Search code examples
drawingjavascriptdistortion

javascript library to perspective distort a drawing

I have a drawing with several lines inside it and I need to animate it moving it and at the same time trasforming it from a rectangle to a parallelogram, as in the toy example image below. I wonder if there are any libraries which can perform such operations without the need to write down a complex and inefficient routine by myself. I am ready to use some graphic libraries as d3, Raphael or Highcharts which I already know a bit, but I don't know if they have a routine such the one I have described. What's the easiest thing to do? example

Solution

  • In Raphael just apply a matrix, I show you an example made with a set of 2 different types of draws:

    var R = Raphael(10,150,200,140);
var r = R.rect(0,0,200,100).attr({fill: "red"});
var p = R.path("M0,50h200");
var s = R.set();
s.push(r);
s.push(p);
s.transform("m1,0.2,0,1,0,0");

    The second value is the X skew, it will skew a fraction of the element width.

    And is the same with inline svg.

    <svg width="200" height="140" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="100" r="0" rx="0" ry="0" fill="#00f" stroke="#000" transform="matrix(1,0.2,0,1,0,0)">
    </rect>
</svg>

    http://jsfiddle.net/crockz/mjthxpok/