Search code examples
cairopycairo

How to draw a curve without knowing 4 points?

According to cairo example code, following code

double x=25.6,  y=128.0;
double x1=102.4, y1=230.4,
       x2=153.6, y2=25.6,
       x3=230.4, y3=128.0;

cairo_move_to (cr, x, y);
cairo_curve_to (cr, x1, y1, x2, y2, x3, y3);

cairo_set_line_width (cr, 10.0);
cairo_stroke (cr);

cairo_set_source_rgba (cr, 1, 0.2, 0.2, 0.6);
cairo_set_line_width (cr, 6.0);
cairo_move_to (cr,x,y);   cairo_line_to (cr,x1,y1);
cairo_move_to (cr,x2,y2); cairo_line_to (cr,x3,y3);
cairo_stroke (cr);

can generate the curve and two pink lines.

enter image description here

But that need 4 points, (x,y), (x1,y1), (x2,y2), (x3,y3)

If I only have x,y and x3, y3 (start and end points of the curve), is there any math formula to generate those pink lines without knowing x1,y1 and x2,y2?

Edit:

Its for the case that I generate the curve through following way.

cairo_move_to (cr, x, y);
cairo_curve_to (cr, x, y3, x3, y, x3, y3);
Solution

  • Just make the points up:

    • start with your two known points, (x1,y1) and (x3,y3):

    enter image description here

    • join the two lines:

    enter image description here

    • create P2 as halfway between P1 and P3:

    enter image description here

    • now rotate P3 90° clockwise:

    enter image description here

    • do with same with P4, create it halfway between P1 and P3:

    enter image description here

    • rotate P4 90° clockwise:

    enter image description here

    • Now you have your four points, and can draw your bézier curve:

    enter image description here

    The midpoint can be calculated as:

    Pmid = (x1+x3)/2 , (y1+y3)/2

    double x1=25.6,  y1=128.0;
double x3=153.6, y3=25.6;

double xm = (x1+x3)/2;
double ym = (y1+y3)/2;

//rotate Pm by 90degrees around p1 to get p2
double x2 = -(ym-y1) + y1;
double y2 =  (xm-x1) + x1;

//rotate Pm by 90degrees around p3 to get p4
double x4 = -(ym-y3) + y3;
double y4 =  (xm-x3) + x3;