CODEWITHSUNDEEP
javascriptraphael
jasonscript
jasonscript

Reputation: 6170

Trying to draw connected rectangles

I'm trying to draw 3 rectangles on the same y-axis. Each of the rectangles are to be connected by a line.

The rectangles are appearing as I'd like but I can't get the line to appear in the right spot

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

The result I'm expecting is something like

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

but I'm getting something like this

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

(please ignore my global variables - I'm trying to debug in console and I need them in the global scope)

Upvotes: 0

Views: 150

Answers (1)

Kaspars Ozols
Kaspars Ozols

Reputation: 7017

You see, the problem is that Horizontal Line command takes only one parameter (docs). As your helper function always provides two parameters, after function evaluation you end up with something like this:

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

Which obviously does not correspond to expected input.

You could change your helper functions to generate something like this:

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

But in this case simplest solution is to use Line To command instead of Horizontal Line command (change H to L). Line To takes two arguments. So you would end up with something like this:

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

In your code sample just change H to L.

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

See the fiddle here

Upvotes: 1

Related Questions