Paint basic graphics with custompaint

Last one First time to know Flutter Drawing components for — CustomPaint We introduced CustomPaint The basic concept and use of , You can see CustomPaint Actually sum Front-end Canvas It's basically the same , Actually the front end Canvas Supported drawing methods CustomPaint All support , After all CustomPaint It's also based on Canvas Realized . In this article we will introduce CustomPaint Drawing basic graphics .

Draw a rectangle

Drawing a rectangle is relatively simple , The method is defined as follows ：

void drawRect(Rect rect, Paint paint)

among rect To draw a rectangle ,paint That is, the brush configuration object . For example, we want to draw a width horizontally in the middle 200 x 120 The rectangular , You can use the following code ：

canvas.drawColor(Color(0xFFF1F1F1), BlendMode.color);
var center = size / 2;
//  Draw a rectangle 
var paint = Paint()..color = Color(0xFF2080E5);
paint.strokeWidth = 2.0;
canvas.drawRect(
  Rect.fromLTWH(center.width - 100, 60, 200, 120),
  paint,
);

paint The default is filled with solid , If you want to idle fill , Set up paint Object's style attribute by PaintingStyle.stroke that will do .

Draw a circle

Drawing a circle is described in the previous article , Similar to drawing a rectangle , The only parameter passed in is the center position , Radius and paint object .

canvas.drawCircle(
  Offset(center.width - 80, 240),
  40,
  paint,
);

Draw the ellipse

The size of the ellipse is constrained by an circumscribed rectangle , The call form is the same as drawing a rectangle .

canvas.drawOval(
  Rect.fromLTWH(center.width, 200, 120, 80),
  paint,
);

Draw any shape

Draw any shape drawPath Realization , The shape path to be drawn Use Path Just build the object . Take drawing an equilateral triangle as an example , After we determine the positions of the three vertices , Use Path Object's lineTo Method to connect three vertices . Here is the implementation code ：

//  Use  Path Draw triangle 
Path trianglePath = Path();
//  Hollow drawing 
paint.style = PaintingStyle.stroke;
trianglePath.moveTo(center.width - 30, 300);
trianglePath.lineTo(center.width + 30, 300);
trianglePath.lineTo(center.width, 352);
trianglePath.lineTo(center.width - 30, 300);
canvas.drawPath(trianglePath, paint);

draw arc

Drawing an arc is actually realized by drawing an ellipse , Just control the range of arc drawing by controlling the angle of drawing . The method of drawing an arc is defined as follows ：

void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)

among rect It's a constrained rectangle of elliptical size ,startAngle Is the starting angle ,sweepAngle Is the angle range drawn .useCenter Indicates whether to close to the center point of the rectangle , The default is true. That is, clockwise . The default is to connect the straight line from the center point to the point corresponding to the starting angle, and then connect the straight line to the center point after drawing the specified angle range . If useCenter by false, Then close it directly according to the starting and ending points of the arc , Instead of going back to the center . Here are the differences between the two kinds of drawing , On the left is useCenter by false, On the right is useCenter by true, Other parameters are the same . The following code is an example code for drawing an arc ：

canvas.drawArc(
  Rect.fromLTWH(center.width - 60, 340, 120, 80),
  0,
  pi / 2,
  false,
  paint,
);

summary

This article introduces CustomPaint Methods and examples of drawing basic graphics , actually Flutter Of Canvas There are many other ways to draw graphics , Such as drawing lines , Draw a rounded rectangle , Draw text and so on , If you are interested, you can refer to the instruction document on the official website to see the use of each method . With the foundation of drawing basic graphics , We can draw some interesting graphics —— UI The task assigned by my little sister has not been completed yet ！