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

Question

我知道 raphael.js 不支持 3D 图形，并且任何 3D 效果都需要进行伪造。我需要在我的 2D Raphael.js 可视化中生成倾斜效果。我想向相机倾斜一个矩形（并有一个透视图）。我的问题是我应该如何编写一段代码来显示这种倾斜？直矩形和倾斜矩形之间的转换是什么？

Answer 1

您可以通过Raphael path DEMO制作倾斜的矩形

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

或者您可以像这个DEMO一样创建 3D 矩形

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

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

祝你好运