Reversing Bézier Curves

This is just a quick note on reversing the direction of bézier curves to produce the same curve with the start and end points reversed.


The situation where this came up is the SVG map for ECODev's page. I already had the basic outline, but I needed the different regions outlined so that people could click on them. I used Sodipodi to draw the internal borders, but that was just different lines. The lines needed to be combined before they'd make shapes. And all the lines were a part of two different shapes: the border between the Brakna and Gorgol is a part of the outlines for both regions.

The problem is in how a SVG shape is filled. Take these two examples:

Both shapes are made of two bézier curves, for the top one the curves are going opposite directions and so make a circle. In the bottom one the curves are going the same way and so to make a contiguous shape it is necessary to jump back. This is what causes the crossing shape in the fill.

To avoid this it is necessary at times to reverse the direction of curves. For static curves it is pretty easy:

M Sx,Sy
C P1x,P1y P2x,P2y P3x,P3y
C Q1x,Q1y Q2x,Q2y Q3x,Q3y
C R1x,R1y R2x,R2y R3x,R3y
M R3x,R3y
C R2x,R2y R1x,R1y Q3x,Q3y
C Q2x,Q2y Q1x,Q1y P3x,P3y
C P2x,P2y P1x,P1y Sx,Sy

Relative curves are a bit more complex, though easily manageable:
(for the notation here, <R2> - <R3> = <R2x,R2y> - <R3x,R3y> = <R2x - R3x,R2y - R3y>)

M Sx,Sy
c P1x,P1y P2x,P2y P3x,P3y
c Q1x,Q1y Q2x,Q2y Q3x,Q3y
c R1x,R1y R2x,R2y R3x,R3y
M <S> + <P3> + <Q3> + <R3>
c <R2> - <R3>, <R1> - <R3>, -<R3>
c <Q2> - <Q3>, <Q1> - <Q3>, -<Q3>
c <P2> - <P3>, <P1> - <P3>, -<P3>