(2.5D图形)在Raphael.js中添加3tD效应

Question

我知道raphael.js不支持3D图形，任何3D效果都需要伪造。我需要在我的2D Raphael.js可视化中产生倾斜效果。我想要倾斜一个长方形的相机(并有一个透视)。我的问题是，我应该如何写一段代码来显示这种倾斜呢？街灯和倾斜矩形之间的转换是什么？

Answer 1

您可以通过Raphael path 演示制作倾斜的矩形。

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

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

祝好运