Попытка рисовать связанные прямоугольники

Question

Я пытаюсь нарисовать 3 прямоугольника на той же оси y. Каждый из прямоугольников должен быть соединен линией.

Прямоугольники появляются, как хотелось бы, но я не могу получить линию, чтобы появиться в нужном месте

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"}); 
}; 

В результате я ожидал что-то вроде

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

но я получаю что-то вроде этого

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

(пожалуйста, игнорировать мой глобальный variab ле - Я пытаюсь отлаживать в консоли, и мне нужно их в глобальном масштабе)

Answer 1

Вы видите, проблема в том, что Horizontal Line команда принимает только один параметр (docs). Как ваша вспомогательная функция всегда имеет два параметра, после оценки функции вы в конечном итоге с чем-то вроде этого:

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

Что явно не соответствует ожидаемому входу.

Вы можете изменить вспомогательные функции для создания что-то вроде этого:

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

Но в этом случае простое решением является использование Line To команды вместо Horizontal Line команды (изменение H к L). Line To принимает два аргумента. Таким образом, вы бы в конечном итоге с чем-то вроде этого:

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

В вашем примере кода просто измените H на L.

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

См скрипку here