Flutter绘制贝塞尔曲线插件proste_bezier_curve的使用

简介

proste_bezier_curve 插件用于通过数据计算获得贝塞尔曲线的控制点，然后通过Flutter的绘图函数将这些点绘制为曲线。与手动绘制路径相比，使用此插件可以更精确地还原设计风格，并且代码更加简洁。

使用方法

二阶贝塞尔曲线

示例

ClipPath(
  clipper: ProsteBezierCurve(
    position: ClipPosition.top,
    list: [
      BezierCurveSection(
        start: Offset(screenWidth, 0),
        top: Offset(screenWidth / 2, 30),
        end: Offset(0, 0),
      ),
    ],
  ),
  child: Container(
    color: Colors.red,
    height: 150,
  ),
)

类和参数说明

• ProsteBezierCurve: 用于绘制并返回裁剪路径。
  • 参数：
    • list: 绘制贝塞尔曲线所需的数据列表。
    • reclip: 是否允许重绘，默认为true。
    • position: 曲线绘制的位置，默认为ClipPosition.left。
• BezierCurveSection: 用于定义贝塞尔曲线片段。
  • 参数：
    • start: 起始点坐标。
    • top: 控制点坐标。
    • end: 结束点坐标。
    • proportion: 控制点位置的比例，默认为1/2。

三阶贝塞尔曲线

示例

ClipPath(
  clipper: ProsteThirdOrderBezierCurve(
    position: ClipPosition.bottom,
    list: [
      ThirdOrderBezierCurveSection(
        p1: Offset(0, 100),
        p2: Offset(0, 200),
        p3: Offset(screenWidth, 100),
        p4: Offset(screenWidth, 200),
      ),
    ],
  ),
  child: Container(
    height: 200,
    color: Colors.red,
  ),
)

类和参数说明

• ProsteThirdOrderBezierCurve: 用于绘制并返回三阶贝塞尔曲线的裁剪路径。
  • 参数：
    • list: 绘制贝塞尔曲线所需的数据列表。
    • reclip: 是否允许重绘，默认为true。
    • position: 曲线绘制的位置，默认为ClipPosition.left。
• ThirdOrderBezierCurveSection: 用于定义三阶贝塞尔曲线片段。
  • 参数：
    • p1, p2, p3, p4: 四个控制点的坐标。
    • smooth: 平滑度，默认为.5。

完整示例代码

以下是一个完整的示例代码，展示了如何使用proste_bezier_curve插件来绘制不同类型的贝塞尔曲线：

import 'package:flutter/material.dart';
import 'package:proste_bezier_curve/proste_bezier_curve.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(body: SafeArea(child: AppHome())),
    );
  }
}

class AppHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    return SingleChildScrollView(
      child: Column(
        children: [
          Text('position is top'),
          SizedBox(height: 30),
          ClipPath(
            clipper: ProsteBezierCurve(
              position: ClipPosition.top,
              list: [
                BezierCurveSection(
                  start: Offset(screenWidth, 0),
                  top: Offset(screenWidth / 2, 30),
                  end: Offset(0, 0),
                ),
              ],
            ),
            child: Container(
              color: Colors.red,
              height: 150,
            ),
          ),
          // 更多的ClipPath实例...
        ],
      ),
    );
  }
}

// 自定义剪辑器示例
class CustomSelfClipper1 extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    BezierCurveSection section1 = BezierCurveSection(
      start: Offset(0, 30),
      top: Offset(10, 45),
      end: Offset(0, 60),
    );
    BezierCurveSection section2 = BezierCurveSection(
      start: Offset(size.width, size.height - 90),
      top: Offset(size.width - 10, size.height - 105),
      end: Offset(size.width, size.height - 120),
    );
    BezierCurveDots dot1 = ProsteBezierCurve.calcCurveDots(section1);
    BezierCurveDots dot2 = ProsteBezierCurve.calcCurveDots(section2);

    path.lineTo(0, 0);
    path.lineTo(0, 30);
    path.quadraticBezierTo(dot1.x1, dot1.y1, dot1.x2, dot1.y2);
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, size.height - 90);
    path.quadraticBezierTo(dot2.x1, dot2.y1, dot2.x2, dot2.y2);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}

class CustomSelfClipper2 extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    BezierCurveSection section1 = BezierCurveSection(
      start: Offset(0, size.height),
      top: Offset(30, size.height - 50),
      end: Offset(80, size.height - 70),
    );
    BezierCurveSection section2 = BezierCurveSection(
      start: Offset(size.width - 100, size.height - 70),
      top: Offset(size.width - 30, size.height - 95),
      end: Offset(size.width, size.height - 160),
    );
    BezierCurveDots dot1 = ProsteBezierCurve.calcCurveDots(section1);
    BezierCurveDots dot2 = ProsteBezierCurve.calcCurveDots(section2);

    path.lineTo(0, 0);
    path.lineTo(0, size.height);
    path.quadraticBezierTo(dot1.x1, dot1.y1, dot1.x2, dot1.y2);
    path.lineTo(size.width - 100, size.height - 70);
    path.quadraticBezierTo(dot2.x1, dot2.y1, dot2.x2, dot2.y2);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}

通过上述代码，您可以轻松地在Flutter应用中绘制各种复杂的贝塞尔曲线，并根据需要进行自定义。如果您有任何问题或建议，请提交到issues，感谢您的支持！