时间戳

首页 > 解决方案 > 颤动贝塞尔曲线自动决定控制点

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

问题描述

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

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

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

请在下面找到我的手稿 在此处输入图像描述

标签： flutterdart

解决方案

您可以使用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);
  }
}

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

推荐阅读