13,050,764 members (80,394 online)
alternative version

#### Stats

111.2K views
62 bookmarked
Posted 26 Mar 2007

# Draw a US Flag using C# and GDI+

, 7 Dec 2007
 Rate this:
This article shows how to draw graphics objects using C# and GDI+

## Introduction

Visual C# provides a powerful GDI+ class library interface that allows users to draw various graphics objects.

This article shows you how to create a US flag using C# and GDI+. The US flag contains 50 star polygons and several rectangles.

## Background

Polygon is one of the most important graphics objects we are dealing with when rendering 2D and 3D graphics or processing computational geometry. `Graphics.DrawPolygon `method draws a polygon defined by an array of point structures. Every pair of two consecutive points in the array specifies a side of the polygon.

Here, I will show you how to create a US flag object. First we need to define the coordinates of a star. As illustrated in the following figure, suppose that the center coordinates of the star are at (xc, yc), r1 is the radius of the inner circle, and r is the radius of the outer circle. The angles a = 72 degrees and ß = 36 degrees.

From this figure, we can easily determine the coordinates of points 0 to 9, as listed in the following table:

 Points x coordinates y coordinates 0 xc yc – r 1 xc + r1 sinß yc – r1 cosß 2 xc + r sina yc – r cosa 3 xc + r1 sina yc + r1 cosa 4 xc + r sinß yc + r cosß 5 xc yc + r1 6 xc – r sinß yc + r cosß 7 xc – r1 sina yc + r1 cosa 8 xc – r sina yc – r cosa 9 xc – r1 sinß yc – r1 cosß

We first implement a `DrawStar `method to draw a single star polygon at the center position (xc, yc) with a size control parameter r (the radius of the outer circle, as shown in the above figure). We then add a `DrawFlag `method that first draws seven red strips on a white rectangle background. Note that the respect ratio of the flag is maintained by setting:

`float height = 10 * width / 19;`

The method then draws the blue rectangle with proper size. Finally we put fifty stars on the blue rectangle uniformly by calling the `DrawStar `method to finish the project.

## Using the Code

The US flag is really drawn by overriding the `OnPaint `method of the `Form1 `class:

```protected override void OnPaint(PaintEventArgs e)
{
Graphics g = e.Graphics;
g.SmoothingMode = SmoothingMode.AntiAlias;
DrawFlag(g, 20, 20, this.Width - 50);
g.Dispose();
}```

Building and running this project produces the following screenshot:

This is just for fun, perhaps even useful. This project is from the examples of the new book "Practical C# Charts and Graphics", where you can find more advanced chart and graphics programming for real-world .NET applications. For more information, please visit my website.

## About the Author

Dr. Jack Xu has a Ph.D in theoretical physics. He has over 15 years programming experience in Basic, Fortran, C, C++, Matlab, and C#, specializing in numerical computation methods, algorithms, physical modeling, computer-aided design (CAD) development, graphics user interface, and 3D graphics. Currently, he is responsible for developing commercial CAD tools based on Microsoft .NET Framework.

## About the Author

 United States
No Biography provided

## Comments and Discussions

 First Prev Next
 Nice Job! Member 1252262925-May-16 22:07 Member 12522629 25-May-16 22:07
 Nice Job! Member 1252262925-May-16 22:07 Member 12522629 25-May-16 22:07
 great azimi632317-Apr-14 21:23 azimi6323 17-Apr-14 21:23
 is this... Giuseppe Tollini14-Aug-13 0:41 Giuseppe Tollini 14-Aug-13 0:41
 My vote of 5 manoj kumar choubey18-Feb-12 3:20 manoj kumar choubey 18-Feb-12 3:20
 Drawing Sine Waves vinaykskvs4-Jun-08 2:51 vinaykskvs 4-Jun-08 2:51
 How does a graphics object representing a flag relate to 'the flag' ? OrlandoCurioso7-Dec-07 12:39 OrlandoCurioso 7-Dec-07 12:39
 Hi Jack, When Jasper Johns made his 'Flag' painting in the fifties, some debated wether this 'was' the American flag with all its meaning and symbolism. Thanks for rephrasing the questions in a new virtual context. However I bookmark your article as 'Drawing with polygons sample (!!)' for future use. Thanks again
 Easier way to compute the star points Wyld_One14-Nov-07 21:32 Wyld_One 14-Nov-07 21:32
 Help in graphics programming needed !! Lalito8019-Jun-07 4:51 Lalito80 19-Jun-07 4:51
 NICE michael_rost11-Jun-07 9:07 michael_rost 11-Jun-07 9:07
 Your book looks great - I need to order it ASAP Eric Engler2-Apr-07 10:26 Eric Engler 2-Apr-07 10:26
 Re: Your book looks great - I need to order it ASAP Jack JH Xu2-Apr-07 11:53 Jack JH Xu 2-Apr-07 11:53
 Re: Your book looks great - I need to order it ASAP Eric Engler2-Apr-07 12:16 Eric Engler 2-Apr-07 12:16
 Re: Your book looks great - I need to order it ASAP Paul Selormey22-Apr-07 18:03 Paul Selormey 22-Apr-07 18:03
 Re: Your book looks great - I need to order it ASAP Jack JH Xu23-Apr-07 9:33 Jack JH Xu 23-Apr-07 9:33
 Re: Your book looks great - I need to order it ASAP Michael Sync1-Aug-07 21:50 Michael Sync 1-Aug-07 21:50
 Re: Your book looks great - I need to order it ASAP Eric Engler6-Aug-07 5:19 Eric Engler 6-Aug-07 5:19
 More generic function for drawing a star DigitalKing26-Mar-07 19:10 DigitalKing 26-Mar-07 19:10
 Re: More generic function for drawing a star Paul Selormey26-Mar-07 20:14 Paul Selormey 26-Mar-07 20:14
 Re: More generic function for drawing a star Jack JH Xu26-Mar-07 20:54 Jack JH Xu 26-Mar-07 20:54
 Re: More generic function for drawing a star Paul Selormey26-Mar-07 21:03 Paul Selormey 26-Mar-07 21:03
 Re: More generic function for drawing a star Jack JH Xu26-Mar-07 21:43 Jack JH Xu 26-Mar-07 21:43
 Re: More generic function for drawing a star Paul Selormey26-Mar-07 22:04 Paul Selormey 26-Mar-07 22:04
 Re: More generic function for drawing a star DigitalKing26-Mar-07 21:24 DigitalKing 26-Mar-07 21:24
 Re: More generic function for drawing a star Paul Selormey26-Mar-07 22:02 Paul Selormey 26-Mar-07 22:02
 Re: More generic function for drawing a star Johann Gerell26-Mar-07 20:50 Johann Gerell 26-Mar-07 20:50
 Re: More generic function for drawing a star Paul Selormey26-Mar-07 20:56 Paul Selormey 26-Mar-07 20:56
 Re: More generic function for drawing a star DigitalKing26-Mar-07 21:15 DigitalKing 26-Mar-07 21:15
 You are missing 2 stars Gerard Nicol26-Mar-07 16:59 Gerard Nicol 26-Mar-07 16:59
 Re: You are missing 2 stars Paul Selormey26-Mar-07 17:06 Paul Selormey 26-Mar-07 17:06
 Re: You are missing 2 stars gucci26-Mar-07 20:15 gucci 26-Mar-07 20:15
 Re: You are missing 2 stars ednrgc27-Mar-07 7:31 ednrgc 27-Mar-07 7:31
 Re: You are missing 2 stars Greg Russell2-Apr-07 4:41 Greg Russell 2-Apr-07 4:41
 Re: You are missing 2 stars tec-goblin18-Jun-07 21:58 tec-goblin 18-Jun-07 21:58
 Re: You are missing 2 stars Pavel Vladov1-Aug-07 23:26 Pavel Vladov 1-Aug-07 23:26
 Re: You are missing 2 stars tec-goblin1-Aug-07 23:32 tec-goblin 1-Aug-07 23:32
 Re: You are missing 2 stars Marcus Deecke22-Jun-07 13:50 Marcus Deecke 22-Jun-07 13:50
 Nice work... Paul Selormey26-Mar-07 14:37 Paul Selormey 26-Mar-07 14:37
 Re: Nice work... Jack JH Xu26-Mar-07 21:17 Jack JH Xu 26-Mar-07 21:17
 Re: Nice work... Paul Selormey26-Mar-07 21:56 Paul Selormey 26-Mar-07 21:56
 Re: Nice work... Jack JH Xu29-Mar-07 9:35 Jack JH Xu 29-Mar-07 9:35
 Re: Nice work... Paul Selormey30-Mar-07 6:42 Paul Selormey 30-Mar-07 6:42
 Re: Nice work... [modified] Jack JH Xu30-Mar-07 7:49 Jack JH Xu 30-Mar-07 7:49
 Last Visit: 31-Dec-99 18:00     Last Update: 25-Jul-17 18:19 Refresh 1

General    News    Suggestion    Question    Bug    Answer    Joke    Praise    Rant    Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.