CODEWITHSUNDEEP
javascriptbezier
espenhogbakk
espenhogbakk

Reputation: 11728

How to calculate control point for a quadratic curve for rounded corners on a pie segment

I'm trying to draw a pie chart where each segment (pie piece) of the chart has rounded corners. The cutout (mouth of the pacman) should also have rounded corners, but i'm strugling a bit with location the control point for the quadratic bezier curve I need to draw in the outside corners.

Illustration of problem

So i want to calculate the point the orange arrow points to. I know the two points inside the orange circle.

I tried one implementation where i would find the perpendicular angle to the line between the two orange points, and then, using that angle, and the center point between the two orange points i can move a desired amount away from that middle point on that angle. That approach sort of works, but depending on where on the circle I am i get some bad results where some places the control point is on the wrong side of the line between the orange points. Best illustrated by this example:

examples of where it goes wrong

What is the correct way to calculate this point a long the circle with the information i have available?

I'm doing this in JS and drawing using PDFKit's tools, but any help regardless of language or tools that can draw bezier curves would be helpful.

Upvotes: 1

Views: 142

Answers (1)

espenhogbakk
espenhogbakk

Reputation: 11728

As always after actually having posted a question, having formulated it, and drawn up the problem one finds the answer quite fast.

The solution to this was to just find the position where the line from the center would have collided with the outside arc if it had been drawn as long as the radius.

const cpx = centerX + radius * Math.cos(angleRad);
const cpy = centerY + radius * Math.sin(angleRad);

angleRad is alrady known as that is used to draw the line in the first place.

Upvotes: 0

Related Questions