dart - 路径 quadraticBezierTo : curve pass the control point

Question

我有一个看起来像这样的 CustomPainter:

class MyPainter extends CustomPainter {
  Offset left, top, right, bottom;

  MyPainter({this.left, this.top, this.right, this.bottom});

  @override
  void paint(Canvas canvas, Size size) {
    Paint pp = Paint()
      ..color = Colors.blue
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 10;

    Paint p = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    Path ph = Path();

    ph.moveTo(left.dx, left.dy);
    ph.quadraticBezierTo(top.dx, top.dy, right.dx, right.dy);

    canvas.drawPoints(PointMode.points, [left, top, right, bottom], pp);
    canvas.drawPath(ph, p);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

这是结果:https://imgur.com/a/m4i6WEA

但是我想要曲线，通过控制点。像这样:https://imgur.com/a/cumbAVz

我该怎么做？!

Answer 1

需要根据需要的点top计算内部控制点P1坐标

首先，粗略评估那个点的参数t。让它为 1/2(如果 top 位于曲线中间附近)。使用二次贝塞尔公式:

P(t)  = P0 * (1-t)^2 + 2 * P1 * t * (1-t) + P2 * t^2
top {for t=1/2} = P0 * 1/4 + P1 * 1/2 + P2 * 1/4
P1 = 2 * top - (P0 + P2) / 2

在组件中:

P1.dx = 2 * top.dx - (left.dx + right.dx) / 2
P1.dy = 2 * top.dy - (left.dy + right.dy) / 2

最后

 ph.quadraticBezierTo(P1.dx, P1.dy, right.dx, right.dy);