Flutter 颤振贝塞尔曲线自动确定控制点

我想用颤振在给定的两个位置（偏移）之间绘制一条贝塞尔曲线。我可以看到以下功能可用于执行此操作

这里我们必须指定我已经知道的起点和终点。还必须指定控制点（x1，y1）。我想知道有什么方法可以生成这个控制点吗？可能是为了更好地控制曲线，我们可以有一个因子（决定该点与基线的距离），并基于该因子，我们可以生成控制点

请在下面找到我的博客

---

您可以使用cubicTo功能

这将创建一条从基线（x1，y1）到（x2，y2）的贝塞尔曲线，并将（x3，y3）作为控制点

class HalfCirclePainter extends CustomPainter {
  HalfCirclePainter({this.scrollOffset});

  final double scrollOffset;

  @override
  void paint(Canvas canvas, Size size) {
    Paint circle = new Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    Path topCirclePath = new Path()
      ..moveTo(0, 0)
      ..lineTo(0, scrollOffset < size.height ? scrollOffset : size.height)
      ..cubicTo(
        20,
        size.height,
        size.width - 20,
        size.height,
        size.width,
        scrollOffset < size.height ? scrollOffset : size.height,
      )
      ..lineTo(size.width, 0)
      ..lineTo(0, 0)
      ..close();

    canvas.drawPath(topCirclePath, circle);
  }
}

类半圆形油漆工扩展自定义油漆工{
半循环绘制程序（{this.scrollOffset}）；
最终双滚动偏移量；
@凌驾
空心油漆（帆布，尺寸）{
绘制圆=新绘制（）
…颜色=颜色。红色
..风格=绘画风格。填充；
路径topCirclePath=新路径（）
…移动到（0，0）
…lineTo（0，scrollOffset

---

这段代码画了一个半圆，希望对大家有所帮助。

谢谢@pskink的帮助。正如您提到的，您的答案是一条注释，代码在注释中显示时可读性不强。这里我列出了代码作为答案。因此，对于研究这个问题的人来说，很容易理解

void drawBezierLine(Canvas canvas, Offset start, Offset end){
    Offset middle = end/2 + start/2;
    Offset baselineVector = end - start;
    Offset controlPoint = middle + Offset(-baselineVector.dy, baselineVector.dx);
    Paint paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8.0;

    var path = Path();
    path.moveTo(start.dx, start.dy);
    path.quadraticBezierTo(controlPoint.dx, controlPoint.dy, end.dx, end.dy);
    canvas.drawPath(path, paint);
}

---

所以这里我们可以给函数提供开始和结束偏移量，它将基于它绘制贝塞尔曲线。贝塞尔（因子）曲线的高度对应于基线的长度

所以你需要一条到基线中心的直线。通过这个函数，我们可以得到一条贝塞尔曲线。但这里我们也必须给出控制点的值。我感兴趣的是自动创建控制点的算法。所以用户只给出起点和终点。程序将计算控制点并绘制曲线。它如何知道曲线的弯曲度？你需要三个点来定义一条曲线。@randal曲线有多大？？是的，我们可以根据我提到的因素来决定。我只想在移动应用程序上，用户将标记起点和终点，我们需要将它们作为曲线连接起来。我们不会要求用户提供控制点。@lsc我已经说过，您需要将控制点放置在与基线中心垂直的线上-这样您的曲线将是对称的-找到垂直线有什么问题？@lsc请参见或-在颤振中，不应使用超过3-4行的代码-检查官方文件

void drawBezierLine(Canvas canvas, Offset start, Offset end){
    Offset middle = end/2 + start/2;
    Offset baselineVector = end - start;
    Offset controlPoint = middle + Offset(-baselineVector.dy, baselineVector.dx);
    Paint paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8.0;

    var path = Path();
    path.moveTo(start.dx, start.dy);
    path.quadraticBezierTo(controlPoint.dx, controlPoint.dy, end.dx, end.dy);
    canvas.drawPath(path, paint);
}