Flutter canvas and drawing from scratch

We have learned in mathematics before that the planar Cartesian coordinate system is as follows:

The right side of the center point is the positive X axis, the left side is the negative X axis, the upper side is the positive Y axis, and the lower side is the negative Y axis

Our mobile phone screen also has a coordinate system that is slightly different from the traditional mathematical coordinate system introduced above.

The coordinate system of our mobile phone screen is shown in the figure below. The center point is the positive direction of the X-axis on the right of the origin in the upper left corner of the mobile phone screen. The positive direction of the Y-axis is below the origin.

First, we create a new class MyPainter inherited from CustomPainter, you can see that two methods need to be implemented

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();
  }
}

The paint method is where we operate the canvas canvas, which is the focus of this article

The shouldRepaint method is used to tell Flutter whether to redraw when refreshing the layout. The general strategy is that in the shouldRepaint method, we determine whether redrawing is required by comparing whether the data before and after are the same.

Now we have a canvas canvas, which is equivalent to a piece of white paper. If we want to draw something on this white paper, we must also have a brush. The brush tool in flutter is the Paint class.

The Paint brush can set the color thickness and various functions of the drawing mode, which will be discussed later.

At this point, we have a canvas and a brush, and we can start drawing what we want.

First, let's draw a line

In Flutter, the method of drawing lines is canvas.drawLine(Offset p1, Offset p2, Paint paint)

There are three parameters, the first is the starting point of the line, the second is the end point of the line, and the third is the brush

code show as below:

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;
  }
}

The effect is as follows:

You can see that the size of our canvas is equal to the size of the screen, and the center point is indeed in the upper left corner of the canvas

Next we limit the size of the canvas and change the position of the canvas

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;
  }
}

The effect is as follows:

You can see that the straight line changes as the position of the canvas changes

Next, we draw another circle in the center of the canvas. The method of drawing a circle is canvas.drawCircle(Offset c, double radius, Paint paint)

There are three parameters, the first is the position of the center point, the second is the radius of the circle, and the third is the canvas

code show as below:

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;
  }
}

The effect is as follows:

At this point, we should have a preliminary understanding of the basic usage of Flutter drawing. This is just the tip of the iceberg, and more usage will be explained later.

Follow my wx public account below to learn more about Flutter