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

---

编辑： 小提琴

有什么解决办法吗？

Answer 1

我不知道倾斜是否是答案。 问题是您要在纸上应用3D效果，而不是2D效果。
我不知道它可以在纯SVG来完成和拉斐尔也一样，但这里的使用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 ...}）”。