Библиотека JavaScript, чтобы в перспективе исказить рисунок

Question

У меня есть рисунок с несколькими линиями внутри, и мне нужно анимировать его, перемещая и в то же время трансформируя из прямоугольника в параллелограмм, как показано на рисунке ниже. Интересно, есть ли библиотеки, которые могут выполнять такие операции без необходимости записывать сложные и неэффективные процедуры самостоятельно? Я готов использовать некоторые графические библиотеки, такие как d3, Raphael или Highcharts, которые я уже немного знаю, но я не знаю, есть ли у них рутина, подобная той, которую я описал. Что проще всего сделать?

Answer 1

В Рафаэле просто примените матрицу, я покажу вам пример, сделанный с набором из 2 различных типов розыгрышей:

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");

Второе значение - это перекос Х, он будет искажать часть ширины элемента.

И то же самое с встроенным 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/