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

您需要根据所需的点"emmet.includeLanguages": { "javascript": "javascriptreact" }来计算内部控制点P1的坐标

首先，对该点粗略估计参数top。让它为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

路径quadraticBezierTo：曲线通过控制点

1 个答案: