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%;
}

这是更新后的小提琴：http://jsfiddle.net/Tj9bJ/2/

Answer 2

我认为这在拉斐尔是不可能的。一个简单的问题：你为什么不直接把它画成你想要的形状呢？我的意思是，这不是一个很难画的形状。

话虽如此，我认为你应该画不同的东西。我会这样做（我重新使用了您在“代码”部分中给我们的路径）：

var path;
var set = paper.set();
function obj(chosenPath,color){
                switch(color){

                    case 1:
                    path = paper.path(chosenPath).attr({
                        fill:field_color1,
                        stroke : "none",
                        "fill-opacity":opacity
                    });
                    break;

                    case 2:
                    path = paper.path(chosenPath).attr({
                        fill:field_color2,
                        stroke : "none",
                        "fill-opacity":opacity
                    });
                    break;

                    case 3:
                    path = paper.path(chosenPath).attr({
                        fill:line_color,
                        stroke : "none",
                    });
                    break;

                    default:
                    return hue;
                }

                set.push(path);

            }

obj('M 2500 3750 L 2500 3481.9 L 0 3481.9 L 0 3750 L 2500 3750Z',1);
obj('M 2500 3482.2 L 2500 3214.1 L 0 3214.1 L 0 3482.2 L 2500 3482.2Z',2);
obj('M 2500 3214.3 L 2500 2946.2 L 0 2946.2 L 0 3214.3 L 2500 3214.3Z',1);
obj('M 2500 2946.5 L 2500 2678.4 L 0 2678.4 L 0 2946.5 L 2500 2946.5Z',2);
obj('M 2500 2678.6 L 2500 2410.6 L 0 2410.6 L 0 2678.6 L 2500 2678.6Z',1)
obj('M 2500 2410.8 L 2500 2142.7 L 0 2142.7 L 0 2410.8 L 2500 2410.8Z',2)
obj('M 2500 2142.9 L 2500 1874.9 L 0 1874.9 L 0 2142.9 L 2500 2142.9Z',1);
obj('M 2500 1875.1 L 2500 1607 L 0 1607 L 0 1875.1 L 2500 1875.1Z',2);
obj('M 2500 1607.3 L 2500 1339.2 L 0 1339.2 L 0 1607.3 L 2500 1607.3Z',1);
obj('M 2500 1339.4 L 2500 1071.3 L 0 1071.3 L 0 1339.4 L 2500 1339.4Z',2);
obj('M 2500 1071.6 L 2500 803.5 L 0 803.5 L 0 1071.6 L 2500 1071.6Z',1);
obj('M 2500 803.8 L 2500 535.7 L 0 535.7 L 0 803.8 L 2500 803.8Z',2);
obj('M 2500 535.9 L 2500 267.8 L 0 267.8 L 0 535.9 L 2500 535.9Z',1);
obj('M 2500 268 L 2500 0 L 0 0 L 0 268 L 2500 268Z',2);
obj('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',3);
obj('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',3)

通过这种方式，您可以修改集合中游戏场的每一个元素，而无需多次重写“.attr({stuff...})”。