CODEWITHSUNDEEP
javascriptmathsvgcurve
daveycroqet
daveycroqet

Reputation: 2727

SVG Path: Curve tailing off of a straight line

I need to draw a straight line (for content separation purposes), and then at the end of it, begin a curve which connects to a designated end-point.

My problem is the sharp turn it makes when beginning to draw the arc after finishing the straight line. How can I eliminate this sharp corner?

As a solution, it is acceptable to extend the straight line in order to smooth out its transition into a curve. I'm just not sure how to go about doing that programmatically, as the end-point will change periodically and it has to work for all use-cases.

Fiddle: (1/5th scale)

http://jsfiddle.net/7k2neef2/1/

SVG Path:

M 56 494 l 324 0 A 100 100 0 0 0 231 275

I should note that I'm using a function to derive the arc and then appending it to the straight line. Here's the function:

            function describeArc(x, y, radius, startAngle, endAngle){

                var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

                var d = [
                    "A", radius, radius, 0, arcSweep, 0, x, y
                ].join(" ");

                d = 'M 56 494 l 324 0 ' + d;

                return d;
            }

Upvotes: 0

Views: 562

Answers (1)

MBo
MBo

Reputation: 80147

For horizontal line segment (x1,y1)-(x2,y1) and point (px, py) we can build circle arc with soft junction. Circle center coordinates

cx = x2
cy = y1 + R

Let's 

dx = px - x2
dy = py - y1
then
dx^2 + (R-dy)^2 = R^2
dx^2 + R^2 - 2 * R * dy + dy^2 = R^2
dx^2 + dy^2 = 2 * R * dy
R = (dx^2 + dy^2) / (2*dy)

Now we have center, radius of arc, starting and ending points. If you need angles to build arc, then starting angle is -Pi/2 (if py > y1), ending angle is atan2(py-cy, px-cx)

Upvotes: 1

Related Questions