Drawing curve working for all the quadrants / Finding dynamic control points for the Bézier curve

Question

Problem is if somebody taps on the angle abc as shown in fig. 1, then the curve should be drawn as shown in fig. 2 using CoreGraphics. I tried it using a Bézier curve, but shapes in different quadrants need dynamic control points which is quite complex (I guess). Can anyone suggest a solution for this?

Answer 1

Instead of going through the math , I figured to draw the curve perfect for all the quadrant programmatically.

The algorithm for this is as follows: (This is an algorithm to find the control points for the Bézier curve perfect for all the quadrants that means you will get the dynamic control points for the Bézier curve.)

Problem: Given 3 points a, b, c, the task is to draw the curve at the angle abc (curve structure is fixed as shown in the figure in the question).

1. Take all 3 points a, b, c in function.

2. Transform all 3 points a, b, c to the origin with respect to point a.

3. Find whether the 3rd point c lies left or right.

4. Rotate the 2nd point b to coincide the x-axis.

5. After step 4, you are in the zero position.

   (Here you can choose the control points for the Bézier curve like you desire. You do not have to solve any relation for the control points. You can set the control points using simple add/subtract math only.) The control points obtained here will be perfect for all the quadrants.

6. After step 5, we get all the control points for the Bézier curve, now take all those points to the original position,
   a. First rotate point b and the two control points (by the rotation angle of b in step 4)
   b. Translate back all points to their original location (i.e. with respect to point a - reversing transformation from step 1).

Now you get the required control points for cubic Bézier suitable for all the quadrants.
Draw the curve using the Bézier curve function.

Answer 2

If I understood it right, then what you need to know is, how to find suitable control points in different quadrant. This link will give you exactly what you want. If you are looking to draw cubic bezier curves then page 18 is for you. However I will recommend you to read it completely to have better understanding of bezier curves.

Formulas given in this paper will help you draw elliptical arcs accurately for one quadrant. You can define your quadrant using angles. To find control points using this paper you need to give following data:

• start and end angle (which will define your quadrant)
• radii of curve according to your figure