javascript库透视扭曲绘图

Question

我的画面里面有几行，我需要动画移动它，同时将它从矩形变为平行四边形，如下面的玩具示例图片所示。我想知道是否有任何库可以执行此类操作，而无需自己写下复杂而低效的例程。我已经准备好使用一些图形库作为d3，Raphael或Highcharts，我已经知道了一些，但我不知道他们是否有例如我所描述的例程。最简单的事情是什么？

Answer 1

在Raphael中只需应用一个矩阵，我向您展示了一组用两种不同类型的绘图制作的示例：

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

第二个值是X偏斜，它会扭曲元素宽度的一小部分。

与内联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/