flutter - 颤动贝塞尔曲线自动决定控制点

Question

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

https://api.flutter.dev/flutter/dart-ui/Path/quadraticBezierTo.html

在这里，我们必须指定我已经知道的起点和终点。并且还必须指定控制点 (x1,y1)。我有办法生成这个控制点吗？可能是为了更好地控制曲线，我们可以有一个因素（决定这个点离基线有多远），并基于这个因素我们可以生成控制点。

请在下面找到我的手稿

Answer 1

您可以使用cubicTo函数

https://api.flutter.dev/flutter/dart-ui/Path/cubicTo.html

void cubicTo (
  double x1,
  double y1,
  double x2,
  double y2,
  double x3,
  double y3
)

这将创建一条从基线 (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);
  }
}

这段代码画了一个半圆，我希望这会有所帮助。

Answer 2

感谢@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);
}

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