颤动的贝塞尔曲线会自动确定控制点

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曲线。贝塞尔曲线（因数）的最高点对应于基线的长度。