试图绘制连接矩形

Question

我试图在同一个y轴上绘制3个矩形。每个矩形都要通过一条线连接。

的矩形出现，因为我想，但我不能出现在正确的位置线

function Point(x,y){ 
    this.x=x; 
    this.y=y; 
} 
Point.prototype.toPath = function(op) {return op+this.x+','+this.y;}; 

window.onload = function(){ 
    paper = Raphael(10, 50, 320, 200); 

    paper.setStart(); 
    processes = [ 
     paper.rect(10, 10, 60, 40), 
     paper.rect(110, 10, 60, 40), 
     paper.rect(210, 10, 60, 40) 
    ]; 

    p1 = new Point(
     processes[0][0].x.baseVal.value + processes[0][0].width.baseVal.value, 
     processes[0][0].y.baseVal.value + (processes[0][0].height.baseVal.value/2) 
    ); 

    p2 = new Point(
     processes[1][0].x.baseVal.value, 
     processes[1][0].y.baseVal.value + (processes[1][0].height.baseVal.value/2) 
    ); 

    paper.path(p1.toPath('M') + p2.toPath('H')); 

    var set = paper.setFinish(); 
    set.attr({fill: "red"}); 
}; 

我期待的结果是一样的东西

------   ------ 
|  |_______|  | 
|  |  |  | 
    ------   ------ 

但我得到这样的东西

------   ------ 
| ___|_______|  | 
|  |  |  | 
    ------   ------ 

（请忽略我的全局变量我试图在控制台调试，我需要他们在全球范围内）

Answer 1

你看，问题是，Horizontal Line命令只有一个参数（docs）。作为助手功能总是会提供两个参数，经过功能评价你最终是这样的：

paper.path('M70,30H110,30');

这显然不符合预期的输入。

你可以改变你的辅助函数生成这样的事情：

paper.path('M70,30H110');

但在这种情况下，最简单的解决方案是使用，而不是Horizontal Line命令（改变H到L）Line To命令。 Line To需要两个参数。所以，你最终会是这样的：

paper.path('M70,30L110,30');

在您的代码示例只是改变H到L。

... 
paper.path(p1.toPath('M') + p2.toPath('L')); 
... 

见拨弄什么造成这个问题here