CODEWITHSUNDEEP
javascriptraphael
Jacobian
Jacobian

Reputation: 10802

Document flowchart in Raphael

I know how to draw a simple rectangle in Raphael and I understand the sense of all its parameters. For example, these parameters give a nice rectangle with width equal to 201 and height equal to 179

 M0,0 L0,179 L210,179 L210,0 L0,0Z

But I do not want a simple rectangle, I want a document flowchart which should look like this

enter image description here

I know from here, that in Raphael I can draw curved lines, for example with these parameters:

M150,150 A100,70 0 0,0 250,220

But unfortunatelly, the book does not explain the sense of these parameters. I know what M means, but I do not know what A means and all the following coordinates.

So, how can I fix my initial rectangle coordinates to get a document flowchart?

Upvotes: 1

Views: 409

Answers (1)

pjmorse
pjmorse

Reputation: 9294

Your missing piece here is the SVG Path Spec.

Your initial rectangle:

M0,0 L0,179 L210,179 L210,0 L0,0Z

...is read as "go to 0,0, then draw a line to 0,179, then draw a line to 210,179, then draw a line to 210,0, then draw a line to 0,0 and return to the start." (The last part, the Z, is a little superfluous, since we've already closed the path.)

You want to replace the second line – from 0,179 to 210,179 – with an arc. I'm not a designer but I'd spitball that maybe a Quadratic Bezier Curve would do the trick:

M0,0 L0,179 Q53,159 105,179 T210,179 L210,0 L0,0Z

That means, starting at the Q, "draw a quadratic Bezier curve from the start point [0,179] to 105,179 using 53,159 as the control point. Then draw another from 105,179 to 210,179 using a reflection of the last control point." I haven't tested this path, so you may need to tweak the control point to get the curve you want. (Increasing the y distance between the control point and 179 will make a more dramatic curve; decreasing it will make a more gentle curve.)

The Raphael documentation explains more about using paths in Raphael.

Upvotes: 1

Related Questions