15,121,891 members
Articles / Multimedia / GDI+
Article
Posted 26 Mar 2007

133.4K views
63 bookmarked

# Draw a US Flag using C# and GDI+

Rate me:
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:

C#
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:

C#
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.

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.

## Share

 United States
No Biography provided

 First PrevNext
 Nice Job! Prog_Chris Yo25-May-16 23:07 Prog_Chris Yo 25-May-16 23:07
 Nice Job! Prog_Chris Yo25-May-16 23:07 Prog_Chris Yo 25-May-16 23:07
 great azimi632317-Apr-14 22:23 azimi6323 17-Apr-14 22:23
 is this... Giuseppe Tollini14-Aug-13 1:41 Giuseppe Tollini 14-Aug-13 1:41
 My vote of 5 Manoj Kumar Choubey18-Feb-12 4:20 Manoj Kumar Choubey 18-Feb-12 4:20
 Drawing Sine Waves vinay_K4-Jun-08 3:51 vinay_K 4-Jun-08 3:51
 How does a graphics object representing a flag relate to 'the flag' ? OrlandoCurioso7-Dec-07 13:39 OrlandoCurioso 7-Dec-07 13:39
 Easier way to compute the star points Wyld_One14-Nov-07 22:32 Wyld_One 14-Nov-07 22:32
 Help in graphics programming needed !! Lalito8019-Jun-07 5:51 Lalito80 19-Jun-07 5:51
 Hi Jack: I am Eduardo, writing from Peru (Lima) and the author of program Secciones (http://sourceforge.net/projects/secciones/) developed with .NET 2 and CSharp and i realize that you have experience with graphics management, viewpoints, viewports, etc. and I was wondering if you can help me improve my little program Secciones. If you have a look on my program, you will see that the graphics are poor and i need to improve them (now i am using ZedGraph). I would like to have a graphics interface like Autocad or any CAD Tools (maybe not so advanced), with the following features: * Allow me to see the Polygons and 2d figures defined by (x,y) points in their real form (Scale on X = Scale on Y). * Zooming functions (In / Out / Rectangular area) * Panning * Grids with points * Able to have "sensible" areas, like the tag of html. * Obviously FREE or Open Source !!! Is there any way to do this? Can you help on that, giving some directions or related information? pd. Sorry for my bad english. Thanks in advance. Regards Saludos, Eduardo Rivera Alva Teléfono: (51-1) 226-1440 (Oficina) Celular : (51-1) 9-506-9736 (Móvil) Email 1 : eriveraa@gmail.com Email 2 : eriveraa@hotmail.com Lima - Perú
 NICE michael_rost11-Jun-07 10:07 michael_rost 11-Jun-07 10:07
 Your book looks great - I need to order it ASAP Eric Engler2-Apr-07 11:26 Eric Engler 2-Apr-07 11:26
 Re: Your book looks great - I need to order it ASAP Jack J. H. Xu2-Apr-07 12:53 Jack J. H. Xu 2-Apr-07 12:53
 Re: Your book looks great - I need to order it ASAP Eric Engler2-Apr-07 13:16 Eric Engler 2-Apr-07 13:16
 Re: Your book looks great - I need to order it ASAP Paul Selormey22-Apr-07 19:03 Paul Selormey 22-Apr-07 19:03
 Re: Your book looks great - I need to order it ASAP Jack J. H. Xu23-Apr-07 10:33 Jack J. H. Xu 23-Apr-07 10:33
 Re: Your book looks great - I need to order it ASAP Michael Sync1-Aug-07 22:50 Michael Sync 1-Aug-07 22:50
 Re: Your book looks great - I need to order it ASAP Eric Engler6-Aug-07 6:19 Eric Engler 6-Aug-07 6:19
 More generic function for drawing a star DigitalKing26-Mar-07 20:10 DigitalKing 26-Mar-07 20:10
 Re: More generic function for drawing a star Paul Selormey26-Mar-07 21:14 Paul Selormey 26-Mar-07 21:14
 Re: More generic function for drawing a star Jack J. H. Xu26-Mar-07 21:54 Jack J. H. Xu 26-Mar-07 21:54
 Re: More generic function for drawing a star Paul Selormey26-Mar-07 22:03 Paul Selormey 26-Mar-07 22:03
 Re: More generic function for drawing a star Jack J. H. Xu26-Mar-07 22:43 Jack J. H. Xu 26-Mar-07 22:43
 Re: More generic function for drawing a star Paul Selormey26-Mar-07 23:04 Paul Selormey 26-Mar-07 23:04
 Re: More generic function for drawing a star DigitalKing26-Mar-07 22:24 DigitalKing 26-Mar-07 22:24
 Re: More generic function for drawing a star Paul Selormey26-Mar-07 23:02 Paul Selormey 26-Mar-07 23:02
 Last Visit: 31-Dec-99 19:00     Last Update: 5-Dec-21 2:10 Refresh 12 Next ᐅ