Javascript （2.5D图形）在Raphael.js中添加3tD效果

我知道raphael.js不支持3D图形和任何需要伪造的3D效果。我需要在2D Raphael.js可视化中生成倾斜效果。

---

我想向相机倾斜一个矩形（并且有一个透视图）。我的问题是，我应该如何编写一段代码来显示这种倾斜？街灯和倾斜矩形之间的转换是什么？

您可以通过拉斐尔路径制作倾斜矩形

var r = new Raphael(10,10, 500, 500);
var p = r.path("M100,300 L120,200 320,200 300,300z");
p.attr({fill: 'yellow', stroke:"red"});

var r = new Raphael(10,10, 500, 500);
var p = r.path("M100,300 L120,200 320,200 300,300z");
p.attr({fill: 'red', stroke:"blue"});
var p1 = p.clone().transform("t10,10").attr({fill: 'yellow'});

var side = r.path("M100,300 L110,310 130,210 120,200z").attr({fill: 'red', stroke:"blue"});
var side1 = side.clone().transform("t200,0");
p1.toFront();

或者您也可以像这样创建3D矩形

var r = new Raphael(10,10, 500, 500);
var p = r.path("M100,300 L120,200 320,200 300,300z");
p.attr({fill: 'yellow', stroke:"red"});

var r = new Raphael(10,10, 500, 500);
var p = r.path("M100,300 L120,200 320,200 300,300z");
p.attr({fill: 'red', stroke:"blue"});
var p1 = p.clone().transform("t10,10").attr({fill: 'yellow'});

var side = r.path("M100,300 L110,310 130,210 120,200z").attr({fill: 'red', stroke:"blue"});
var side1 = side.clone().transform("t200,0");
p1.toFront();

如果您理解我所做的，并在演示中稍微使用一些变量，您当然可以使它看起来像您想要的那样

祝你好运