Flutter自定义画板

1. 绘制直线

绘制直线需要调用Canvas的drawLine方法，传入起点和终点坐标即可。

 canvas.drawLine(Offset(20.0, 20.0), Offset(400.0, 20.0), _paint);

完整代码示例：

import 'package:flutter/material.dart';

class CustomView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter 绘制直线示例',
        home: new Scaffold(
          appBar: AppBar(
            title:
                Text('CustomView 绘制直线', style: TextStyle(color: Colors.white)),
          ),
          body: Center(
            child: SizedBox(
              width: 500.0,
              height: 500.0,
              child: CustomPaint(
                painter: LinePainter(),
                child: Center(
                  child: Text(
                    '绘制直线',
                    style: const TextStyle(
                        fontSize: 30.0,
                        fontWeight: FontWeight.w500,
                        color: Colors.blue),
                  ),
                ),
              ),
            ),
          ),
        ));
  }
}

class LinePainter extends CustomPainter {

   Paint _paint = new Paint()
   ..color = Colors.green
   ..strokeCap = StrokeCap.square
   ..isAntiAlias = true
   .. strokeWidth = 3.0
   ..style = PaintingStyle.fill;//填充绘制

  @override
  void paint(Canvas canvas, Size size) {
   // 绘制图形，可替换部分
    canvas.drawLine(Offset(20.0, 20.0), Offset(400.0, 20.0), _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

2. 绘制圆

绘制圆需要调用Canvas的drawCircle方法，传入中心点坐标、半径、画笔即可。

 canvas.drawCircle(Offset(200.0, 20.0), 120.0, _paint);

将示例1中的绘制图形部分替换成上面的代码即可预览效果。

3. 绘制椭圆

绘制椭圆需要调用Canvas的drawOval方法，同时需要使用一个矩形来确定绘制的范围，椭圆是在这个矩形之中内切的，其中第一个参数为左上角坐标，第二个参数为右下角坐标。

    Rect rect = Rect.fromPoints(Offset(80.0, 200.0), Offset(300.0, 300.0));
    canvas.drawOval(rect,_paint);

将示例1中的绘制图形部分替换成上面的代码即可预览效果。

4. 绘制圆角矩形

绘制圆角矩形需要调用Canvas的drawRRect方法。

    //创建一个中心的坐标为(200.0, 250.0)，边长为100.0的矩形
    Rect rect2 = Rect.fromCircle(center: Offset(200.0, 250.0), radius: 100.0);
    //把矩形转换成圆角矩形，圆角角度为20.0
    RRect rRect = RRect.fromRectAndRadius(rect2, Radius.circular(20.0));
    //绘制圆角矩形
    canvas.drawRRect(rRect,_paint);

将示例1中的绘制图形部分替换成上面的代码即可预览效果。

5. 绘制嵌套矩形

绘制嵌套矩形需要调用Canvas的drawDRRect方法。

    Rect rect2 = Rect.fromCircle(center: Offset(200.0, 250.0), radius: 100.0);
    Rect rect3 = Rect.fromCircle(center: Offset(200.0, 250.0), radius: 50.0);
    //把矩形转换成圆角矩形，圆角角度为20.0
    RRect rRect = RRect.fromRectAndRadius(rect2, Radius.circular(20.0));
    RRect rRect2 = RRect.fromRectAndRadius(rect3, Radius.circular(20.0));
    //绘制嵌套矩形
    canvas.drawDRRect(rRect,rRect2,_paint);

将示例1中的绘制图形部分替换成上面的代码即可预览效果。

6. 绘制多个点

绘制多个点需要调用Canvas的drawPoints方法,传入的PointMode的枚举类型有三个值，points(点)、lines(隔点连接线)、polygon(相邻连接线)。

 _paint.color = Colors.cyan;
 _paint.strokeWidth = 20.0;
 canvas.drawPoints(
        PointMode.points,
        [
          Offset(100.0, 50.0),
          Offset(120.0, 120.0),
          Offset(150.0, 50.0),
          Offset(200.0, 100.0),
          Offset(250.0, 250.0),
          Offset(300.0, 300.0),
        ],
        _paint);

将示例1中的绘制图形部分替换成上面的代码即可预览效果。

7. 绘制圆弧

绘制圆弧需要调用Canvas的drawArc方法。

    const PI = 3.1415926;
    _paint.color = Colors.yellow;
    _paint.strokeWidth = 2.0;
    Rect rect = Rect.fromCircle(center: Offset(200.0, 250.0), radius: 100.0);
    canvas.drawArc(rect, 0.0, PI/2, true, _paint);

将示例1中的绘制图形部分替换成上面的代码即可预览效果。

8. 绘制路径

绘制路径需要调用Canvas的drawPath方法。

     _paint.color = Colors.deepOrange;
    Path path = new Path()..moveTo(20.0, 100.0)
    ..lineTo(30.0, 180.0)
    ..lineTo(150.0, 250.0)
    ..lineTo(40.0, 300.0)
    ..lineTo(350.0, 500.0);
    // 连接路径的起始点
//    path.close();
    canvas.drawPath(path, _paint);

将示例1中的绘制图形部分替换成上面的代码即可预览效果。

最后编辑于：2019.04.07 19:24:12