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.

A five-star red flag that starts from zero

The national flag of the People’s Republic of China is a five-starred red flag. The national flag of the People’s Republic of China is the symbol and symbol of the People’s Republic of China. Every citizen and organization shall respect and care for the National Flag. — Law of the People’s Republic of China on the National Flag

To coincide with the National Day and national celebration, today we will use the CustomPaint of flutter to draw a standard five-star red flag

The origin of the five-star red flag

The national flag of the People’s Republic of China, namely the five-starred red flag, is one of the national symbols of the People’s Republic of China. The upper left corner set with five yellow five-pointed star red flag, the flag of the four small star around in a big star on the right side of the half ring, large star symbolizes the communist party of China, four small five-pointed star symbol of the working class, the peasantry, the urban petty bourgeoisie and the national bourgeoisie, the arrangement of five stars graphic symbol hitom the shape of China’s territory.

The designer of the five-star flag is Zeng Liansong, a private citizen from Ruian, Zhejiang Province. Following the victory of the Chinese Communist Party in the KMT civil War, in July 1949, the preparatory meeting of the New Political Consultative Conference issued a notice to collect national flag patterns. Zeng Liansong designed and submitted his sample national flag. Of the 2,992 national flag designs submitted, Zeng’s design was selected as 38 candidate sketches. After much discussion and a few modifications, his design was chosen for the flag of the People’s Republic of China. On September 27, 1949, the first plenary session of the Chinese People’s Political Consultative Conference adopted the national flag of the People’s Republic of China as a five-star red flag, and all subsequent constitutions made the same provisions. At the founding ceremony on October 1, 1949, Chairman MAO announced the establishment of the Central People’s Government of the People’s Republic of China and pushed the button to raise the first five-star red flag in Tiananmen Square.

The original design The final design

Flag design standard version color

format red yellow
RGB 238/28/37 255/255/0
HEX #ee1c25ff #ffff00ff
CMYK 0/88/84/7 0/0/100/0

Download a standard five-star red flag (source: gov.cn)

Specification of the five-star red flag

The Presidium of the first plenary Session of the Chinese People’s Political Consultative Conference promulgated the national flag law on September 28, 1949. According to Article 4 of the Law of the People’s Republic of China on the National Flag, the enterprises making national flags shall be designated by the people’s governments of provinces, autonomous regions and municipalities directly under the Central Government. The ratio of length to width of the flag is 3:2. The standard GB 12982-2004: National Flag promulgated by the General Administration of Quality Supervision, Inspection and Quarantine of the People’s Republic of China and the Standardization Administration of The People’s Republic of China also provides the legal description of the national flag

Drawing method standard
1. Divide the flag surface into four equally divided rectangles, and then divide the upper left rectangle into 15×10 squares.



2. The center of the large five-pointed star is located 5 above and 5 below the rectangle, 5 left and 10 right. The circumference of a large pentagram is 6 units in diameter.



The center of four small pentagram stars, the first is located on the top 2 bottom 8, left 10 right 5, the second is located on the top 4 bottom 6, left 12 right 3, the third is located on the top 7 bottom 3, left 12 right 3, the fourth is located on the top 9 bottom 1, left 10 right 5.



4. The circumference of each small pentacle is 2 units in diameter. Each of the four smaller pentacles has a point opposite the center of the larger one.

start

From above we have learned about the origin of the national flag, drawing standards, let us happily start the five-star red flag drawing journey, hee hee

Create a project

  1. Open up our AndroidStudio, which I’m using hereBumblebee 2021.1.1The Canary version. Click on theNew Flutter ProjectButton to create a new Flutter project

  1. Select the project type and clickNextButton to enter the project information setting page and fill in the project information and project type (Application), organization information. As a new generation of programmers, here we checkKotlin 和 SwiftThe current project does not involve the operation of the native end, so we ticked all the platforms. Click on theFinishButton to complete the project creation





Start coding

  1. First, we remove unnecessary code from the project and write the most basic code structure

  1. writeFiveStarredRedFlagClass, inheritance,CustomPainter, mainly carrying the task of drawing, here we carbonpaint 和 shouldRepaintMethod to start the real drawing, Let’s go, hee hee
class FiveStarredRedFlag extends CustomPainter {

  @override
  void paint(Canvas canvas, Size size) {
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; }}Copy the code
  1. According to the drawing method of the national flag, we first draw an auxiliary line graph
  • Draw the background
    // Divide the flag into 30 * 20 cells, so the width of each cell is divided by 30 to get the size of each cell
    final double gridItemSize = size.width / (15 * 2);
    final Paint paint = Paint();
    // Set anti-aliasing
    paint.isAntiAlias = true;

    // Draw the backgroundpaint .. style = PaintingStyle.fill .. color =const Color.fromARGB(255.246.138.142);
    canvas.drawRect(Rect.fromLTWH(0.0, size.width, size.height), paint);
Copy the code

  • Draw a big grid
    /// 1.First divide the flag into 4 equal rectangles, and then divide the upper left rectangle into 15×10 squares.paint .. style = PaintingStyle.stroke .. color =const Color.fromARGB(255.8.6.6);
    // Draw a large grid
    canvas.drawRect(Rect.fromLTWH(0.0, size.width, size.height), paint);
    // Draw a line, divided into four grids
    final double halfHeight = size.height / 2;
    canvas.drawLine(Offset(0, halfHeight), Offset(size.width, halfHeight), paint);
    final double halfWidth = size.width / 2;
    canvas.drawLine(Offset(halfWidth, 0), Offset(halfWidth, size.height), paint);
Copy the code

  • Draw the upper-left corner cell
    // Draw horizontal lines
    for (int i = 1; i < 10; ++i) {
      canvas.drawLine(Offset(0, i * gridItemSize), Offset(halfWidth, i * gridItemSize), paint);
    }
    // Draw a vertical line
    for (int i = 1; i < 15; ++i) {
      canvas.drawLine(Offset(i * gridItemSize, 0), Offset(i * gridItemSize, halfHeight), paint);
    }
Copy the code

  • Draw the large circle and four small circles where the pentacle is located
  /// 2.The center of the large pentagram is located 5 above and 5 below the rectangle, 5 left and 10 right. The circumference of a large pentagram is 6 units in diameter.
  canvas.drawCircle(Offset(5 * gridItemSize, 5 * gridItemSize),
  6 / 2 * gridItemSize, paint);
  
  /// 3.The center of four small pentagram stars, the first is located on the top 2 bottom 8, left 10 right 5, the second is located on the top 4 bottom 6, left 12 right 3, the third is located on the top 7 bottom 3, left 12 right 3, the fourth is located on the top 9 bottom 1, left 10 right 5.
  canvas.drawCircle(Offset(10 * gridItemSize, 2 * gridItemSize), gridItemSize, paint);
  canvas.drawCircle(Offset(12 * gridItemSize, 4 * gridItemSize), gridItemSize, paint);
  canvas.drawCircle(Offset(12 * gridItemSize, 7 * gridItemSize), gridItemSize, paint);
  canvas.drawCircle(Offset(10 * gridItemSize, 9 * gridItemSize), gridItemSize, paint);
Copy the code

  • Draw four smaller circles with centers pointing to the center of the larger circle
  // Connect all the smaller circles to the larger ones
  canvas.drawLine(Offset(5 * gridItemSize, 5 * gridItemSize), Offset(10 * gridItemSize, 2 * gridItemSize), paint);
  canvas.drawLine(Offset(5 * gridItemSize, 5 * gridItemSize), Offset(12 * gridItemSize, 4 * gridItemSize), paint);
  canvas.drawLine(Offset(5 * gridItemSize, 5 * gridItemSize), Offset(12 * gridItemSize, 7 * gridItemSize), paint);
  canvas.drawLine(Offset(5 * gridItemSize, 5 * gridItemSize), Offset(10 * gridItemSize, 9 * gridItemSize), paint);
Copy the code

So far, we have drawn all the auxiliary lines of the five-star red flag, the next to begin the main play, drawing the five-pointed star

  1. Draw the pentagram
  • How to locate the five points of a pentagram?

As we know, pentagonal star has five inner angles and five outer angles. In the coordinate system with the center of pentagonal star, we connect the central point with the Angle vertex, and we can get ten evenly divided parts. The Angle of each part is 360° ÷ 10 = 36°, so the difference between the two adjacent outer angles is 36° × 2 = 72°. And by the law of trigonometric sines and cosines, now we can easily find the coordinates of each point.

  void _drawStar(
    Canvas canvas,
    Paint paint,
    Offset center,
    double radius, {
    double offset = 0, {})final Path path = Path();
    final List<Offset> points = [];
    // Get the coordinates of the five vertices
    for (int i = 0; i < 5; i++) {
       // math.pi / 2 -> 90°
       Math.pi / 2.5 -> 72°
       // The offset Angle of each point
       final double degree = math.pi / 2 + i * math.pi / 2.5 + offset;
       // Calculate the x and y coordinates of each point
       points.add(Offset(center.dx - (radius * math.cos(degree)),
               center.dy - (radius * math.sin(degree))));
    }
    // Move the drawing point to the first vertex
    path.moveTo(points[0].dx, points[0].dy);
    // The connection sequence between points is 0 -> 2 -> 4 -> 1 -> 3 -> 0
    path.lineTo(points[2].dx, points[2].dy);
    path.lineTo(points[4].dx, points[4].dy);
    path.lineTo(points[1].dx, points[1].dy);
    path.lineTo(points[3].dx, points[3].dy);
    path.lineTo(points[0].dx, points[0].dy);
    // Draw the path
    canvas.drawPath(path, paint);
  }
Copy the code
  • Draw the pentagram
    // Draw the large pentagram
    drawStar(canvas, paint, Offset(5 * gridItemSize, 5 * gridItemSize), 6 / 2 * gridItemSize);
    // Draw a small five-pointed star
    drawStar(canvas, paint, Offset(10 * gridItemSize, 2 * gridItemSize), gridItemSize);
    drawStar(canvas, paint, Offset(12 * gridItemSize, 4 * gridItemSize), gridItemSize);
    drawStar(canvas, paint, Offset(12 * gridItemSize, 7 * gridItemSize), gridItemSize);
    drawStar(canvas, paint, Offset(10 * gridItemSize, 9 * gridItemSize), gridItemSize);
Copy the code

  • How do you point the angles of four smaller pentacles towards the center of the larger pentacle?

Here we also use the center of the larger circle as the axis of the coordinate axis, and we use the law of sine to get the offset Angle of the smaller pentacle, and the actual rotation Angle of the pentacle is the circle minus the offset Angle, Get the actual rotation Angle (360 – math.asin(5 / math.sqrt(math.pow(4, 2) + math.pow(5, 2))) * 180 / math.pi) * math.pi / 180, similarly, We can get the rotation angles of the other three smaller pentacles

 // Draw a small five-pointed star
    drawStar(
      canvas,
      paint,
      Offset(10 * gridItemSize, 2 * gridItemSize),
      gridItemSize,
      rotate: (270 -
              math.asin(3 / math.sqrt(math.pow(3.2) + math.pow(5.2))) *
                  180 /
                  math.pi) *
          math.pi /
          180,); drawStar( canvas, paint, Offset(12 * gridItemSize, 4 * gridItemSize),
      gridItemSize,
      rotate: (270 -
              math.asin(1 / math.sqrt(math.pow(7.2) + math.pow(1.2))) *
                  180 /
                  math.pi) *
          math.pi /
          180,); drawStar( canvas, paint, Offset(12 * gridItemSize, 7 * gridItemSize),
      gridItemSize,
      rotate: (360 -
              math.asin(7 / math.sqrt(math.pow(7.2) + math.pow(2.2))) *
                  180 /
                  math.pi) *
          math.pi /
          180,); drawStar( canvas, paint, Offset(10 * gridItemSize, 9 * gridItemSize),
      gridItemSize,
      rotate: (360 -
              math.asin(5 / math.sqrt(math.pow(4.2) + math.pow(5.2))) *
                  180 /
                  math.pi) *
          math.pi /
          180,);Copy the code

You’re done. Let’s take a look at the final result

conclusion

  • The difficulty of drawing the five-star red flag mainly lies in the five-pointed star and the small five-pointed star. One corner points to the center of the big five-pointed star, which is mainly used hereLaw of sines and cosinesTo figure out the information about the pentacle, and then plot it
  • We mainly use the CustomPaint component in the drawing. The actual drawing is carried out in CustomPainter, using Canvas, Paint and Path apis. These are commonly used apis for custom drawing
  • In the final effect, we add a hover variable inshouldRepaintMethod, we addcovariantCovariant keyword that will parameter byCustomPainterChange toFiveStarredRedFlag
  @override
  bool shouldRepaint(covariant FiveStarredRedFlag oldDelegate) {
    returnoldDelegate.hover ! = hover; }Copy the code
  • Project source code address

The last

I wish the motherland safe and sound, peace!! Happy 11th everyone, hee hee

The resources

  1. Wikipedia – Flag of the People’s Republic of China
  2. GB 12982-2004: National Flag