Flutter画布与绘制从零开始一

我们以前在数学里学过平面直角坐标系如下所示：

中心点右边是正X轴左边是负X轴上边是正的Y轴下面是负的Y轴

我们手机屏幕也是有一个坐标系和上面介绍的传统数学坐标系有些许区别

我们手机屏幕的坐标系如下图所示中心点在手机屏幕左上角原点右边为X轴正方向原点下边为Y轴正方向

首先我们新建一个类MyPainter继承自CustomPainter，可以看到需要实现两个方法

class MyCanvas extends StatelessWidget {
  const MyCanvas({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyPainter(),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
     // TODO: implement paint
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
   // TODO: implement shouldRepaint
    throw UnimplementedError();
  }
}

paint方法内就是我们操作画布canvas的地方，这是本篇文章的重点

shouldRepaint方法作用是告诉Flutter刷新布局时是否重绘。一般的策略是在shouldRepaint方法中，我们通过对比前后数据是否相同来判定是否需要重绘。

现在我们拥有了一块画布canvas，画布就相当于一张白纸，要在这张白纸上画点东西，那肯定也要画笔，在flutter里画笔工具就是Paint类。

Paint画笔可以设置颜色粗细，绘制模式各种功能，这个放到后面讲。

此时，我们有了画布和画笔，可以开始绘制我们想要的东西。

首先，我们先画一条线

在Flutter里，画线的方法是 canvas.drawLine(Offset p1, Offset p2, Paint paint)

参数有三个，第一个是线的起始点位置，第二个是线的结束点位置，第三个是画笔

代码如下：

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
      print("大小：${size.width} ${size.height}");
      Paint paint = Paint();
      paint.color = Colors.white;
      canvas.drawLine(Offset(0,0), Offset(200,200), paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

效果如下：

可以看到我们画布的大小是等于屏幕的大小，并且中心点确实在画布的左上角

下面我们限制画布的大小，并且改变画布的位置

class MyCanvas extends StatelessWidget {
  const MyCanvas({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 250,
            height: 250,
            color: Colors.lightBlueAccent,
            child: CustomPaint( 
              painter: MyPainter(),
            ),
          )
        ],
      )
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
      print("大小：${size.width} ${size.height}");
      Paint paint = Paint();
      paint.color = Colors.black;
      canvas.drawLine(Offset(0,0), Offset(200,200), paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

效果如下：

可以看到直线随着画布的位置改变而改变

下面我们再画一个圆在画布的中心，画圆的方法是 canvas.drawCircle(Offset c, double radius, Paint paint)

参数有三个，第一个是中心点位置，第二个是圆半径，第三个是画布

代码如下：

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
      print("大小：${size.width} ${size.height}");
      Paint paint = Paint();
      paint.color = Colors.white;
      canvas.drawLine(Offset(0,0), Offset(200,200), paint);
      canvas.drawCircle(Offset(size.width/2,size.height/2), 20, paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

效果如下：

到此，我们应该初步了解了Flutter绘制的基本用法，这里只是冰山一角，后面还会讲解更多的用法。

关注下面我的wx公众号学习更多Flutter知识

Flutter画布与绘制从零开始 一

猜你喜欢

Flutter画布与绘制从零开始一