2

I have a series of backwards-'L' shapes drawn in Raphael in SVG path notation -- just a collection of datapoints each represented by a horizontal line then a vertical line, of varying lengths. 

<div id="canvas"></div>​
<script>
    var data = [
        [{x: 32, y: 207}, {x: 50, y: 371}],
        [{x: 34, y: 209}, {x: 39, y: 34}],
        [{x: 32, y: 216}, {x: 58, y: 38}],
        [{x: 70, y: 221}, {x: 93, y: 40}],
        [{x: 89, y: 223}, {x: 105, y: 41}],
        [{x: 113, y: 225}, {x: 150, y: 42}],
        [{x: 132, y: 228}, {x: 173, y: 43}],
        [{x: 305, y: 230}, {x: 354, y: 45}]
    ],
        paper = Raphael("canvas", 400, 300),
        path;

    for (var c = 0; c < data.length; c += 1) {
        path = "M" + data[c][0].x + "," + data[c][0].y;
        path += "H" + data[c][1].x;
        path += "V" + data[c][2].y;
        paper.path(path).attr({"stroke": "#900", "stroke-width": 2})
    }
</script>

jsFiddle

I would like to give these shapes rounded corners of a radius of 5 or so. Do I have to manually draw the horizontal line to 5px short of its destinatation, program a curve up PI/2 radians, then draw the rest of the vertical line?

I'm hoping there's a way to do this with a single SVG curve with a small radius, such that the shape proceeds in a straight line until shortly before its end and then curves upward -- exactly the behavior of a rounded rectangle in Raphael or CSS3.

I have examined the SVG path guidelines but am having difficulty working through the details.

Thank you!

Chris Wilson
  • 6,599
  • 8
  • 35
  • 71

1 Answers1

3

This should do the trick (at least in the example cases):

http://jsfiddle.net/jYGrq/3/

Change this

path += "H" + (data[c][1].x)

to this: path += "H" + (data[c][1].x-5);

And add these lines after it:

if (data[c][0].y > data[c][1].y) path += "s 5 0 5 -5";
else if (data[c][0].y < data[c][1].y) path += "s 5 0 5 5";

This covers all the cases in example, but if you want to round corners despite of the orientation, make more ifs. Hope this helps a little.

By the way, I assume that shorthand relative cubic (s) is the curve type that is most suitable in your case.

Timo Kähkönen
  • 11,962
  • 9
  • 71
  • 112
  • 1
    Good idea! Looks like perfect circular arcs at this size, although they aren't. I made another jsFiddle using "real" arcs, but that's certainly less elegant: http://jsfiddle.net/jYGrq/4/ – Thomas W Dec 04 '12 at 20:07
  • Arcs vs. Cubic difference: http://jsfiddle.net/jYGrq/5/. See animation between A and s. Noticeable, but not big. Which one is better or more right, hard to say. – Timo Kähkönen Dec 05 '12 at 03:02