Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Xiao CAI has been learning about custom View recently. I just learned about the magic of Paint brush. Now LET’s learn about the mystery of Canvas Canvas. Flutter offers a variety of drawing methods. Small dishes don’t touch deeply. Try them all.

Canvas Canvas

DrawColor Draws the background color

DrawColor requires two parameters, the first is the color value and the second is the blend mode. There are many blend modes to choose from, but note that the blend mode will blend pixels with the other View colors on which it is drawn.

canvas.drawColor(Colors.pinkAccent, BlendMode.srcIn);
Copy the code
DrawPoints Draws points/lines

DrawPoints can not only drawPoints, but also draw lines between points. PointMode includes points/lines/polygon; If there are an odd number of points, the last one is not connected to it.

Pointmode. points, [Offset(30.0, 30.0), Offset(60.0, 30.0), Offset(90.0, 30.0), Offset(90.0, 30.0), Offset(90.0, 30.0), canvas. 60.0), Offset (60.0, 60.0), Offset (30.0, 60.0)], Paint (). StrokeWidth = 4.0). Canvas. DrawPoints (pointmode. points, [Offset(160.0, 30.0), Offset(190.0, 30.0), Offset(220.0, 30.0), Offset(220.0, 30.0), canvas. 60.0), Offset (190.0, 60.0), Offset (160.0, 60.0)], Paint (). StrokeWidth = 4.0.. strokeCap = StrokeCap.round); DrawPoints (pointmode. lines, [Offset(30.0, 100.0), Offset(60.0, 100.0), Offset(90.0, 100.0), Offset (90.0, 130.0), the Offset (60.0, 130.0), Offset (30.0, 130.0)], Paint (). StrokeWidth = 4.0.. strokeCap = StrokeCap.round); DrawPoints (pointmode. polygon, [Offset(160.0, 100.0), Offset(190.0, 100.0), Offset(220.0, 100.0), pointmode. polygon, [pointmode. polygon, [Offset(160.0, 100.0), Offset(220.0, 100.0), Offset(220.0, 130.0), Offset(160.0, 130.0)], Paint().. StrokeWidth = 4.0.. strokeCap = StrokeCap.round);Copy the code

DrawLine draw the line
Canvas. DrawLine (Offset(30.0, 90.0), Offset(screen.width-30.0, 90.0), Paint().. StrokeWidth = 4.0). Canvas. DrawLine (Offset(30.0, 120.0), Offset(screen.width-30.0, 120.0), Paint().. StrokeWidth = 4.0.. strokeCap = StrokeCap.round); Canvas. DrawLine (Offset(30.0, 150.0), Offset(screen.width-30.0, 150.0), Paint().. StrokeWidth = 4.0.. strokeCap = StrokeCap.square);Copy the code
DrawArc draws arcs/cakes

DrawArc can be used to draw arcs or even pie charts with Paint. The first parameter of drawArc is the rectangular range, that is, the range of the circle where the arc is. If it is not square, the circle where the arc is will be stretched. The second parameter is the starting Angle, 0.0 is the coordinate system x axis forward square; The third parameter is the end Angle, if more than 2*PI, it is a circle; The fourth parameter is whether to start from the center. If false, only arcs are drawn; if true, pie is drawn. The fifth parameter, the Paint brush, can be used to draw whether or not to fill with the PaintingStyle property.

Const PI = 3.1415926; Canvas. DrawArc (rect. fromCircle(center: Offset(60.0, 60.0), radius: 80.0), 0.0, PI / 2, false, Paint().. color = Colors.white.. strokeCap = StrokeCap.round.. StrokeWidth = 4.0.. style = PaintingStyle.stroke); Canvas. DrawArc (rect. fromCircle(center: Offset(200.0, 60.0), radius: 80.0), 0.0, PI / 2, false, Paint().. color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.fill); Canvas. DrawArc (rect. fromCircle(center: Offset(90.0, 160.0), radius: 80.0), 0.0, PI * 2/3, true, Paint().. color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.stroke); Canvas. DrawArc (rect. fromCircle(center: Offset(250.0, 160.0), radius: 80.0), 0.0, PI * 2/3, true, Paint().. color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.fill); Canvas. DrawArc (rect.fromltwh (30.0, 300.0, 200.0, 100.0), 0.0, 5.0, true, Paint().. color = Colors.white.. style = PaintingStyle.fill); Canvas. DrawArc (rect. fromPoints(Offset(260.0, 260.0), Offset(320.0, 420.0)), 0.0, 5.0, true, Paint().. color = Colors.white.. style = PaintingStyle.fill);Copy the code

DrawRect draws the rectangle

DrawRect is used to draw rectangles, and Flutter provides multiple methods for drawing rectangles:

  1. Rect.fromPoints is drawn based on two points (upper left point/lower right point);
  2. Rect.fromLTRB according to the top left corner of the screen as the coordinate system dot, set the distance in four directions respectively;
  3. Rect.fromLTWH is drawn based on setting the point in the upper left corner and the width and height of the rectangle;
  4. Rect.fromCircle is the most special, drawing squares from circles;
Canvas. DrawRect (rect. fromPoints(Offset(30.0, 30.0), Offset(150.0, 100.0)), Paint().. color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.stroke); Canvas. DrawRect (rect. fromPoints(Offset(210.0, 30.0), Offset(330.0, 100.0)), Paint().. color = Colors.white.. style = PaintingStyle.fill); Canvas. DrawRect (rect.fromltrb (30.0, 140.0, 150.0, 210.0), Paint().. color = Colors.white); Canvas. DrawRect (rect.fromltwh (210.0, 140.0, 120.0, 70.0), Paint().. color = Colors.white); Canvas. DrawRect (rect. fromCircle(center: Offset(90.0, 300.0), radius: 60.0), Paint().. color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.stroke);Copy the code

DrawRRect draws rounded rectangles

DrawRRect draws rounded rectangles, and Flutter provides a variety of drawing methods:

  1. The first four parameters of rrect. fromLTRBXY plot the position of the rectangle, and the remaining two plot fixed x/y radians;
  2. The first four parameters of rrect. fromLTRBR are used to plot the rectangle position, and the last parameter plots Radius radians;
  3. The first four parameters of RRect. FromLTRBAndCorners are used to draw the rectangle position, and the remaining four optional parameters are used to set the Radius radians of the four corners according to requirements, which can be different.
  4. The first argument to RRect. FromRectXY draws a rectangle, which can be drawn in a variety of ways described above, and the remaining two arguments draw a fixed x/y radian;
  5. The first argument to rrect. fromRectAndRadius draws a rectangle, which can be drawn in any of the ways described above, and the last argument draws Radius radians;
  6. The first parameter of rrect. fromRectAndCorners draws a rectangle, which can be drawn in a variety of ways described above. The remaining four optional parameters can be set according to the requirements of the Radius radians of the four corners, which is the most flexible.
Canvas. DrawRRect (rrect.fromlTrbxy (30.0, 30.0, 150.0, 100.0, 8.0, 8.0), Paint().. color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.stroke); Canvas. DrawRRect (rrect.fromltrbXY (210.0, 30.0, 330.0, 100.0, 8.0, 18.0), Paint().. color = Colors.white.. style = PaintingStyle.fill); Canvas. DrawRRect (rrect.fromltrbr (30.0, 140.0, 150.0, 210.0, radio.circular (8.0)), Paint().. color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.stroke); // Canvas. DrawRRect (RRect. FromLTRBAndCorners (210.0, 140.0, 330.0, 210.0, topLeft: Circular (5.0), topRight: Radius. Circular (20.0), bottomRight: Radius. Circular (5.0), bottomLeft: Radius. Circular (20.0)), Paint (). color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.stroke); // Canvas. drawRRect(rrect. fromLTWH(30.0, 260.0, 120.0, 70.0), TopLeft: Radius. Circular (5.0), topRight: Radius. Circular (20.0), bottomRight: Radius. Radius. Circular (20.0)), Paint (). color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.stroke); Rrect. fromLTWH(210.0, 260.0, 120.0, 70.0), Radius. Elliptical (8.0, 18.0)), Paint (). color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.stroke); // canvas. DrawRRect (rrect.fromRectxy (rect.fromCircle (center: Offset(90.0, 420.0), radius: 60.0), 8.0, 8.0), Paint (). color = Colors.white.. StrokeWidth = 4.0.. style = PaintingStyle.stroke);Copy the code

DrawDRRect draws the nested rectangle

DrawDRRect drawing nested rectangular, the first parameter to the external rectangular, the second parameter for internal rectangle, the above a variety of Settings available rounded rectangle way; The last parameter is Paint brush, and the PaintingStyle is fill to fill the range between the two rectangles.

Canvas. DrawDRRect (rrect.fromRectxy (center: Offset(90.0, 420.0)), radius: 60.0), 8.0, 8.0), rrect.fromRectxy (rect.fromCircle (center: Offset(90.0, 420.0), radius: 54.0), 8.0), Paint().. color = Colors.whit.. StrokeWidth = 3.0.. style = PaintingStyle.stroke); Canvas. DrawDRRect (rrect.fromRectxy (center: Offset(270.0, 420.0)), radius: 60.0), 8.0, 8.0), rrect.fromRectxy (rect.fromCircle (center: Offset(270.0, 420.0), radius: 54.0), 8.0, 8.0), Paint().. color = Colors.white.. StrokeWidth = 3.0.. style = PaintingStyle.fill);Copy the code

DrawCircle Draws a circle

DrawCircle To draw a circle, just set the origin and radius.

Canvas. Methods like drawCircle (Offset (90.0, 420.0), 60.0, Paint (). color = Colors.white.. StrokeWidth = 3.0.. style = PaintingStyle.stroke); Canvas. Methods like drawCircle (Offset (270.0, 420.0), 60.0, Paint (). color = Colors.white.. StrokeWidth = 3.0.. style = PaintingStyle.fill);Copy the code

DrawOval draws the ellipse

DrawOval’s method of drawing ellipses is very simple, mainly drawing a rectangle can be;

Canvas. DrawOval (rect.fromltrb (30.0, 30.0, 150.0, 100.0), Paint().. color = Colors.white.. StrokeWidth = 3.0.. style = PaintingStyle.stroke); Canvas. DrawOval (rect.fromltrb (210.0, 30.0, 330.0, 100.0), Paint().. color = Colors.white.. StrokeWidth = 3.0.. style = PaintingStyle.fill);Copy the code

DrawPath Draws a path

DrawPath is used to draw paths. A Flutter provides many path methods. Try some of the common ones:

  1. MoveTo () starts at the current coordinate point and defaults to the upper-left corner of the screen if not set.
  2. LineTo () draws from the starting point to the new point set;
  3. Close () means that the last point is connected to the starting point, but the middle rectangle/arc is not connected at the end;
  4. Reset () clears the line;
  5. AddRect () adds a rectangle line;
  6. AddOval () adds arcs, namely Bezier (second-order) curves;
  7. CubicTo () adds arcs, namely Bezier (third order) curves;
  8. RelativeMoveTo () relative to moving to the current position, the whole coordinate system moves relative to moveTo;
  9. RelativeLineTo () connects to the current point and moves the coordinate system to the current point;
canvas.drawPath( Path() .. MoveTo (30.0, 100.0).. The lineTo (120.0, 100.0).. The lineTo (90.0, 130.0).. The lineTo (180.0, 130.0).. close(), Paint() .. color = Colors.white.. StrokeWidth = 3.0.. style = PaintingStyle.stroke); canvas.drawPath( Path() .. MoveTo (200.0, 100.0).. The lineTo (290.0, 100.0).. The lineTo (260.0, 130.0).. The lineTo (350.0, 130.0).. close(), Paint() .. color = Colors.white.. StrokeWidth = 3.0.. style = PaintingStyle.fill); canvas.drawPath( Path() .. MoveTo (30.0, 170.0).. The lineTo (120.0, 170.0).. The lineTo (90.0, 210.0).. The lineTo (180.0, 210.0).. AddRect (rect.fromltwh (180.0, 210.0, 120.0, 70.0)).. AddOval (Rect. FromLTWH (180.0, 210.0, 120.0, 70.0)).. MoveTo (230.0, 170.0).. The lineTo (320.0, 170.0).. close(), Paint() .. color = Colors.white.. StrokeWidth = 3.0.. style = PaintingStyle.stroke); canvas.drawPath( Path() .. arcTo(Rect.fromCircle(center: Offset(60, 300), radius: 80), -PI / 6, PI * 2 / 3, false), Paint() .. color = Colors.white.. StrokeWidth = 3.0.. style = PaintingStyle.stroke); canvas.drawPath( Path() .. MoveTo (210.0, 300.0).. CubicTo (210.0, 390.0, 270.0, 330.0, 330.0, 300.0), Paint().. color = Colors.black.. StrokeWidth = 3.0.. style = PaintingStyle.stroke);Copy the code

Vegetable drew a basic coordinate system for comparisonmoveTo()/lineTo() 与 relativeMoveTo()/relativeLineTo()The difference between:

canvas.drawPath( Path() .. RelativeMoveTo (30.0, 30.0).. RelativeLineTo (120.0, 30.0).. RelativeLineTo (90.0, 60.0).. RelativeLineTo (180.0, 60.0), Paint (). color = Colors.blue.. StrokeWidth = 6.0.. style = PaintingStyle.stroke); canvas.drawPath( Path() .. MoveTo (30.0, 30.0).. The lineTo (120.0, 30.0).. The lineTo (90.0, 60.0).. LineTo (180.0, 60.0), Paint (). color = Colors.orange.. StrokeWidth = 6.0.. style = PaintingStyle.stroke);Copy the code

Small dishes on the custom View research is not in-depth, there are many methods have not tried, there are mistakes in the hope of more guidance!

Source: Little Monk A Ce