Question

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);
Was it helpful?

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;

OTHER TIPS

Not unless you provide some kind of constraint that can be used to derive the location of the pink lines. By themselves, two end-points can only define a straight line segment.

The pink lines represent the departure vectors from the two end points. Without these vectors, the "curve" between the two points is simply a straight line (unless you have some other information that defines it).

If you don't have (x1,y1) and (x2,y2), you can just use (x3,y3) as the endpoint for the pink line from (x,y) and vice versa. They'll end up right on top of your black line, which is where they should be for a straight line.

If the curve is defined by a function, calculate the derivative as you approach the end points and draw the tangent line along that angle.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top