Question

我正在与Raphael.js合作，并且在创建透视转换时遇到问题。它应该是一个svg / raphael解决方案，因为它是创建图像的一个步骤。以下是现在的图像：

top view

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

target

代码：

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

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

这就是说，我认为你应该采用不同的方式。我是这样做的（我重新使用了你在＃34;代码＆＃34;部分中给我们的补丁）：

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)

通过这种方式，你可以修改集合中游戏区域的每个元素，而且你不需要重写＆＃34; .attr（{stuff ...}）＆＃34;这么多次。

Raphael.js视角转换

2 个答案: