flutter中绘制基础引言
Flutter 中实现绘制的主要是CustomPainter类
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyPainter extends CustomPainter{ ///实际的绘画发生在这里 @override void paint(Canvas canvas, Size size) { } ///这样Flutter就知道它必须调用paint方法来重绘你的绘画。 ///否则，在此处返回false表示您不需要重绘 @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } } |
然后放在父控件的child里用 CustomPaint 包裹使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/// CustomPaint 创建画布 child: CustomPaint( size: const Size(200, 200), ///这是CustomPainter类的一个实例，它在画布上绘制绘画的第一层 painter: MyPainter(), ///完成绘画之后，子画构将显示在绘画的顶部。 child: const Center( child: Text("Blade Runner"), ), ///foregroundPaint：最后，这个油漆绘制在前两个图层的顶部 foregroundPainter: MyPainter(), ) |
三阶贝塞尔曲线
在 flutter 通过 Canvas 来结合 Path 来实现绘制 三阶贝塞尔曲线，三阶贝塞尔曲线就是说两个点之间的线 有两个控制点。
例如我们要绘制上述的椭圆，其中 A、B、C 就是我们的目标点，我们绘制的路径就是 从A到B再到C，然后控制点如下
- a1 、 b1 点是 A B 的控制点
- b2 、c2 点是 B C 的控制点
那么我们要绘制出如上图中的效果，代码如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
class CurvePainter1 extends CustomPainter { ///实际的绘画发生在这里 @override void paint(Canvas canvas, Size size) { ///创建画笔 var paint = Paint(); ///设置画笔的颜色 paint.color = Colors.blue; ///创建路径 var path = Path(); ///A点 设置初始绘制点 path.moveTo(0, 55); /// 绘制到 B点（100，0） path.cubicTo(0, 25, 48, 0, 100, 0); /// 绘制到 C点（214, 55） path.cubicTo(166, 0, 214, 25, 214, 55); ///绘制 Path canvas.drawPath(path, paint); } ///你的绘画依赖于一个变量并且该变量发生了变化，那么你在这里返回true， ///这样Flutter就知道它必须调用paint方法来重绘你的绘画。否则，在此处返回false表示您不需要重绘 @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } } |
在 flutter 中，通过 path 的 cubicTo 函数来实现三阶贝塞尔曲线
void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3) 点（x1,y1）、(x2,y2) 为控制点 (x3,y3) 为目标点