How to draw line until middle point using quadraticBezierTo in flutter?-CodePudding

I'm trying to draw a line between three points using quadraticsBezierTo but here is my problem.

Current result:

Expected result:

Code:

  final path = Path();
  path.moveTo(p1.x, p1.y);
  path.quadraticBezierTo(p2.x, p2.y, p3.x, p3.y);
  //Also tried: path.cubicTo(p2.x, p2.y, p2.x, p2.y, p3.x, p3.y);

Do you know how to achieved this result?

CodePudding user response：

Bezier curves aren't designed to pass through their control points, but if that's what you want you can do it by modifying the center point. From Wikipedia

For quadratic Bézier curves one can construct intermediate points Q0 and Q1 such that as t varies from 0 to 1:

Point Q0(t) varies from P0 to P1 and describes a linear Bézier curve.

Point Q1(t) varies from P1 to P2 and describes a linear Bézier curve.

Point B(t) is interpolated linearly between Q0(t) to Q1(t) and describes a quadratic Bézier curve.

Thus, q0 = p0 * (1 - t) p1 * t and q1 = p1 * (1 - t) p2 * t and the actual curve is

b = q0 * (1 - t)   q1 * t
  = p0 * (1 - t)^2   p1 * t * (t - 1)   p1 * t * (t - 1)   p2 * t^2
  = p0 * (1 - t)^2   2 * p1 * t * (t - 1)   p2 * t^2

Note that by ^ I mean exponent, not xor.

So if you want your curve to pass through some point c at time t = 1/2, then we can find what p1 should be. c = p0 * 0.25 p1 * 0.5 p2 * 0.25 So,

p1 = 2 * c - 0.5 * (p0   p2)

CodePudding user response：

Maybe,

path.quadraticBezierTo(
    2.0 * p2.x - 0.5 * (p1.x   p3.x), 2.0 * p2.y - 0.5 * (p1.y   p3.y), 
    p3.x, p3.y);

path.cubicTo(
    (4.0 * p2.x - p3.x) / 3.0, (4.0 * p2.y - p3.y) / 3.0, 
    (4.0 * p2.x - p1.x) / 3.0, (4.0 * p2.y - p1.y) / 3.0, 
    p3.x, p3.y);