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

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

祝你好运

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

1 个答案: