javascript - Raphael.js 透视变换

Question

我正在使用 Raphael.js，但在创建透视变换时遇到了问题。它应该是一个 svg/raphael 解决方案，因为它是创建图像的一个步骤。这是它现在的样子:

目标是使用变换使其在 z 轴上倾斜。它应该看起来像这个图像:

---

代码:

paper.setStart();
Obj=paper.path('M 2500 3750 L 2500 3481.9 L 0 3481.9 L 0 3750 L 2500 3750Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 3482.2 L 2500 3214.1 L 0 3214.1 L 0 3482.2 L 2500 3482.2Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 3214.3 L 2500 2946.2 L 0 2946.2 L 0 3214.3 L 2500 3214.3Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 2946.5 L 2500 2678.4 L 0 2678.4 L 0 2946.5 L 2500 2946.5Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 2678.6 L 2500 2410.6 L 0 2410.6 L 0 2678.6 L 2500 2678.6Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 2410.8 L 2500 2142.7 L 0 2142.7 L 0 2410.8 L 2500 2410.8Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 2142.9 L 2500 1874.9 L 0 1874.9 L 0 2142.9 L 2500 2142.9Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 1875.1 L 2500 1607 L 0 1607 L 0 1875.1 L 2500 1875.1Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 1607.3 L 2500 1339.2 L 0 1339.2 L 0 1607.3 L 2500 1607.3Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 1339.4 L 2500 1071.3 L 0 1071.3 L 0 1339.4 L 2500 1339.4Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 1071.6 L 2500 803.5 L 0 803.5 L 0 1071.6 L 2500 1071.6Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 803.8 L 2500 535.7 L 0 535.7 L 0 803.8 L 2500 803.8Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 535.9 L 2500 267.8 L 0 267.8 L 0 535.9 L 2500 535.9Z');
Obj.attr({'fill':field_color1,'stroke':'none', 'fill-opacity': opacity});
Obj=paper.path('M 2500 268 L 2500 0 L 0 0 L 0 268 L 2500 268Z');
Obj.attr({'fill':field_color2,'stroke':'none', 'fill-opacity': opacity});

Obj=paper.path('M 1237.1 597.3 C 1237.1 604.4 1242.9 610.2 1250 610.2 C 1257.1 610.2 1262.9 604.4 1262.9 597.3 C 1262.9 590.1 1257.1 584.4 1250 584.4 C 1242.9 584.4 1237.1 590.1 1237.1 597.3');
Obj.attr({'fill': line_color,'stroke':'none'});
Obj=paper.path('M 1262.9 3151.7 C 1262.9 3144.6 1257.1 3138.8 1250 3138.8 C 1242.9 3138.8 1237.1 3144.6 1237.1 3151.7 C 1237.1 3158.9 1242.9 3164.7 1250 3164.7 C 1257.1 3164.7 1262.9 3158.9 1262.9 3151.7');
Obj.attr({'fill': line_color,'stroke':'none'});
Obj=paper.path('...');
Obj.attr({'fill': line_color,'stroke':'none'});
var st = paper.setFinish();

---

编辑:Fiddle

有什么解决办法吗？

Answer 1

我不知道倾斜是否是这里的答案。问题是您正在尝试在纸上应用 3d 效果，而不是 2d 效果。
我不确定是否也可以在纯 svg 和 raphael 中完成，但这是使用 css3 3d 变换 (rotateX) 和透视的纯 css 解决方案:

body {
    /* the lower the value, the higher the distortion */
    perspective: 600px;
}

#raph-rotate {
    width: 500px;
    height: 750px;
    margin: 0 auto;
    transform: rotateX(30deg);
    transform-origin: 50% 100%;
}

这是更新后的 fiddle :http://jsfiddle.net/Tj9bJ/2/