How To Draw Vietnam Flag

Problem

"What are we studying Math for. You have been working in IT for a long time, have you ever needed to use sin cos tan?" . My brother in grade 12 asked. Know how to answer it now. Honestly, I was also very stupid math, thinking about it until I came up with a little easy lesson that I learned in computer graphics to demo it to see. A very familiar topic in computer graphics is: Drawing the Vietnamese flag with Flutter.

Always, in order to draw a complex shape, we should start from the smallest things, draw the simplest one.

1. Draw a simple shape in Flutter

To draw a simple Circle in Flutter. We use the CustomPaint and CustomPainter Widgets very simply with only 2 steps:

Step 1 : Create a CustomPainter

Create a class named MyCustomPainter that inherits the CustomPainter class, it will force you to override the paint and shouldRepaint return the bool type.

class MyCustomPainter extends CustomPainter {

MyCustomPainter ( { this . banKinh } ) ;

// bán kính đường tròn

final double banKinh ;

@ override

void paint ( Canvas canvas , Size size ) {

// tọa độ tâm đường tròn cũng chính là tâm của Widget (size.width / 2, size.height / 2)

final toaDoTamDuongTron = Offset ( size . width / 2 , size . height / 2 ) ;

// paint: giống như chọn style cho cái hình mình vẽ: nó màu gì,...

final paint = Paint ( )

. . color = Colors . pink // vẽ màu hồng

. . style = PaintingStyle . stroke // chỉ vẽ viền

. . strokeWidth = 2 ; // độ dày viền bằng 2

// vẽ đường tròn

canvas . drawCircle ( toaDoTamDuongTron , banKinh , paint ) ;

}

@ override

bool shouldRepaint ( MyCustomPainter oldDelegate ) {

return banKinh != oldDelegate . banKinh ; // nếu bán kính truyền vào bị thay đổi thì mới cho vẽ lại.

}

Canvas is a pure white drawing board where we can draw all kinds of things in the world. This Canvas class provides us the functions for drawing. As in the above example I use its drawCircle function to draw that circle.
Size is the size of the Widget I intend to draw. For example: For Size(300.0, 200.0) , the Widget has width = 300.0 and height = 200.0 .
Paint as a stylist, create styles for drawings such as what color, line thickness, bla bla
The shouldRepaint function helps us decide whether to redraw this CustomView or not. When it redraws it will run the paint function again. If return true it will re-draw, return false will not re-draw
Offset passes to the x, the y coordinate. An Offset object represents a point in the Cartesian coordinate system (Cartesian – s) that you learned in Mathematics. In addition, it can also represent the coordinates of a vector in Math.
Unlike the Cartesian coordinate system that we learned in the past, the coordinate system in Flutter, it conventionally that the positive direction of the vertical axis is downward and the origin we named point A (0, 0) will be referred to wish in that position. From that point A (0, 0) , we easily deduce the remaining 3 points are B (size.width, 0) , C (size.width, size.height) and D (0, size.height) . These are 4 extremely important points to help us determine the coordinates of the points, the shapes to be drawn in the canvas

Step 2 : Create a CustomPaint widget passed MyCustomPainter just created.

class MyCircleWidget extends StatelessWidget {

@ override

Widget build ( BuildContext context ) {

return CustomPaint (

painter : MyCustomPainter ( banKinh : 100 ) ,

size : Size ( 300 , 300 ) ,

) ;

}

The CustomPaint widget has 3 important properties:

painter : pass in a CustomPainter as created above
child : pass a child widget of this CustomPaint Widget
size : When passing the Size object to the size MyCustomPainter , the MyCustomPainter object will be received in the void paint(Canvas canvas, Size size) function void paint(Canvas canvas, Size size) . Note that if this CustomPaint Widget has a child , this Size object becomes meaningless because Flutter will use the size of the Widget child instead of the Size object we pass in the size variable.

Full source code: https://dartpad.dev/0605bed20c6410a25f5d91120c865d1c

Bonus picture, this picture enough to explain the above theory

With only 2 classes CustomPaint and CustomPainter , we have created a custom shape. It's easy, right. If you just shut it down, the million words above are only encapsulated in this picture. Remember this is the weight

To draw a more complex shape, we need to use Path . Now we will learn the Path through our main problem today: Drawing the Vietnamese flag

2. Drawing the Vietnamese flag

Search on Wiki, get the standard scale image of the Vietnamese flag

Okay, so the problem is: the flag length is 3a , the width is 2a , the radius of the circumcircle of the golden star is 3a / 5 (that is 1/5 of length). Let's start

Job

First thing to do is create a CustomPainter and declare variables like width , height and r (radius) in the paint function.

class VietNamFlagPainter extends CustomPainter {

@ override

final double width = size . width ; // chiều rộng của lá cờ

final double height = 2 * width / 3 ; // chiều cao của lá cờ bằng 2 / 3 chiều rộng

final double r = width / 5 ; // bán kính đường tròn ngoại tiếp ngôi sao

}

@ override

bool shouldRepaint ( CustomPainter oldDelegate ) {

return true ;

}

Next, we will need to draw the red flag. Create a redPaint and use the drawRect function to draw the red rectangle. The drawRect function needs to pass a Rect object (rectangular). To create a Rect object we use the Rect.fromLTRB(double left, double top, double right, double bottom) function Rect.fromLTRB(double left, double top, double right, double bottom) . In which left , top , right , bottom are the distances calculated from the horizontal or vertical axis like this:

final Paint redPaint = Paint ( ) // tạo paint màu đỏ để vẽ cờ đỏ

. . style = PaintingStyle . fill ; // tô màu hết cả shape

// vẽ hình chữ nhật full cái Widget CustomPaint luôn

canvas . drawRect ( Rect . fromLTRB ( 0 , 0 , width , height ) , redPaint ) ;

Next, to draw a star, we need to find the coordinates of 5 vertices A, B, C, D, E. You will know why you need to find the coordinates.

Although the coordinate system in Flutter is different from the Cartesian coordinate system – slightly, I just attach the Cartesian coordinate system – the familiar, ie the origin is the point O (0, 0) and the positive direction of the vertical axis so that it will become more familiar with the Mathematics that you have learned, solving it faster and easier. In a little bit, I will use the offsets to bring back the Flutter coordinate system later.

We have: OA = OB = OC = OD = OE = r so we can find the point coordinate immediately A ( 0 , r ) A (0, r) A ( 0 , r )

5 points A, B, C, D, E create 5 equal chord so create 5 angle at equal center. So we can calculate it A O B ^ = 360 ° / 5 = 72 ° widehat {AOB} = 360 ° / 5 = 72 ° A O B = 3 6 0 ° / 5 = 7 2 ° . From there we can calculate ∣ x B ∣ | x_B | | X B ∣ = FB = OB * sin (72 °) and ∣ y B ∣ | y_B | | Y B ∣ = OF = OB * cos (72 °). Since point B is in the first quadrant (positive direction Ox and positive direction Oy), the coordinate point B ( r ∗ S i n ( 72 ° ) , r ∗ c o S ( 72 ° ) ) B (r * sin (72 °), r * cos (72 °)) B ( r ∗ s i n ( 7 2 ° ) , r ∗ c o s ( 7 2 ° ) )

Since point E is symmetrical with point B through Oy, we always find the coordinate of the point E ( – x B , y B ) E (-x_B, y_B) E (- x B , Y B )

With just a few simple calculations, we have found the coordinates of 3 points A, B and E. Now we continue to find the coordinates of points C and D:

Draw OG perpendicular to CD => OG is both the height and the bisector of C O D ^ widehat {COD} C O D => C O G ^ widehat {COG} C O G = 72 ° / 2 = 36 °. From there we can calculate ∣ x C ∣ | x_C | | X C ∣ = GC = OC * sin (36 °) and ∣ y C ∣ | y_C | | Y C ∣ = OG = OC * cos (36 °). Since point C is in the fourth quadrant (positive direction Ox, negative direction Oy), the coordinate point C ( r ∗ S i n ( 36 ° ) , – r ∗ c o S ( 36 ° ) ) C (r * sin (36 °), -r * cos (36 °)) C ( r ∗ s i n ( 3 6 ° ) , – r ∗ c o s ( 3 6 ° ) )

Since point D is symmetrical with point C through Oy, we find the point coordinate D ( – x C , y C ) D (-x_C, y_C) D (- x C , Y C )

Well, so we have found the coordinates of 5 points. Now let's put them in code. Since the sin and cos functions in Dart's dart:math library use radians, we first need to write an extension function that converts degrees to radians.

import 'dart:math' ; // cần phải import thư viện dart:math

extension NumberUtil on num {

num toRadian ( ) {

return this * pi / 180 ;

}

Now create 5 Offset objects representing 5 points A, B, C, D, E only. Note that at the moment we compute using the positive coordinate system of the vertical axis going up and the coordinate system in Flutter has the positive direction, the vertical axis is facing down so in the code we need to get the points of symmetry with A, B, C. , D, E cross the Ox axis according to the formula: x F l u t t e r = x C a l c u l a t e xFlutter = xCalculate x F l u t t e r = x C a l c u l a t e and y F l u t t e r = – y C a l c u l a t e y Flutter = -y Calculate y F l u t t e r = – y C a l c u l a t e in it x C a l c u l a t e xCalculate x C a l c u l a t e and y C a l c u l a t e yCalculate y C a l c u l a t e is the coordinates we just found in the calculation x F l u t t e r xFlutter x F l u t t e r and y F l u t t e r yFlutter y F l u t t e r is the coordinate I write code in Flutter.

final pointA = Offset ( 0 , - r ) ; // vì lúc nảy mình tính được tọa độ A (0, r)

// Tọa độ B tính toán được là B (r * sin(72°), r * cos(72°)) nên trong code là

final pointB = Offset ( r * sin ( 72. toRadian ( ) ) , - r * cos ( 72. toRadian ( ) ) ) ;

// Tọa độ C tính toán được là C (r * sin(36°), -r * cos(36°)) nên trong code là

final pointC = Offset ( r * sin ( 36. toRadian ( ) ) , r * cos ( 36. toRadian ( ) ) ) ;

final pointD = Offset ( - pointC . dx , pointC . dy ) ; // đối xứng với C qua trục tung

final pointE = Offset ( - pointB . dx , pointB . dy ) ; // đối xứng với B qua trục tung

We usually draw a star by connecting A → C, C → E, E → B, from B → D and D reconnecting A, right?

Path will help us to do just that.

final Path path = Path ( )

. . moveTo ( pointA . dx , pointA . dy ) // đưa ngòi bút đến điểm A

. . lineTo ( pointC . dx , pointC . dy ) // vẽ 1 line từ A đến C

. . lineTo ( pointE . dx , pointE . dy ) // vẽ 1 line từ C đến E

. . lineTo ( pointB . dx , pointB . dy ) // vẽ 1 line từ E đến B

. . lineTo ( pointD . dx , pointD . dy ) // vẽ 1 line từ B đến D

. . close ( ) ; // vẽ 1 line từ D đến A tạo thành 1 hình khép kín

Initially the Path will start at point M (0, 0) as shown in the image below. The moveTo(xA, yA) , lineTo(xC, yC) all pass in the coordinate and latitude of a point, but the moveTo function only moves the pen from the current point to the point it was passed in (which is point A ) rather than connecting the 2 points together and lineTo is performing connecting those 2 points together. As shown in the figure lineTo(xC, yC) will join the pen's current point A with point C.

Canvas has a drawPath function to draw any Path , as long as we find the coordinates of the points on the Path it can be drawn. Let's draw.

final Paint yellowPaint = Paint ( ) // tạo paint màu vàng để vẽ sao vàng

. . style = PaintingStyle . fill ;

canvas . drawPath ( path , yellowPaint ) ; // vẽ ngôi sao vàng theo path

Yeah, now run the app, we will get an image like this =))

Forget, at the moment we calculated that the center of the star coincides with the origin of the coordinate O (0, 0) , but in fact the center of the star must be point I (width / 2, height / 2) . We need to perform vector translations O I → overrightarrow {OI} O I by the shift function:

// toạ độ tính toán của tâm ngôi sao

final pointO = Offset ( 0 , 0 ) ;

// toạ độ thật của tâm ngôi sao

final pointI = Offset ( width / 2 , height / 2 ) ;

// vector tịnh tiến OI

final translationVector = pointI - pointO ;

// thực hiện phép tịnh tiến cả Path bằng hàm shift

final realPath = path . shift ( translationVector ) ;

// vẽ realPath

canvas . drawPath ( realPath , yellowPaint ) ;

Here are the results:

Full source code: https://dartpad.dev/9f75935302a6e4fb20073cbc3ae95507

Conclude

Well, the theory behind "Draw custom shapes" in Flutter is that much. To be able to draw the complex shapes required by the project, the most important thing is still our thinking applied to the lines of code inside the paint(Canvas canvas, Size size) function paint(Canvas canvas, Size size) of CustomPainter . In the next post, I will increase the level of drawing a more difficult, practical, closer shape to the actual project so that Flutter programming becomes less boring. See you in the next post. If you see that my share is valuable, then click up and vote for me. Thank you