In Figure P3.6 Draw Acceleration Polygon Using Scale 1 100

Drawing Polygons

Graphics Tutorials: For C# and VB NET Students

1 2 3 4 5 6

In this lesson, you'll learn how to draw polygons using VB Net and C# code. You'll also see some more fill styles.

You can construct quite complex shapes by using Polygons. The idea is to set up an array of points for your polygon, and then pass the array to the DrawPolygon Subroutine/method of the Graphics objects. Let's see how it works by creating a polygon with five sides.

Add a new button to the form, with a Text property of "Draw Polygon". In the coding window, add this new line somewhere at the top, just under the Rectangle variables:

VB

Dim polygonPoints(5) As Point

C#

Point[] polygonPoints = new Point[6];

We're setting up an array, here. But the type of variable we're setting up is a Structure of Points.

In your button code, add the following in VB:

polygonPoints(0) = New Point(

And this in C#:

polygonPoints[0[ = new Point(

So every position in your array needs a new Point. But as soon as you have typed the left round bracket, you should see arguments needed for the Point:

The first argument, x As Integer, is how far from the left you want the point. The second argument, y As Integer, is how far down you want the point. The polygon we want to draw looks like this:

The highlighted point is the one we want to draw first (the ordering of the Points is not important). So the two points are at 50 for the x and 150 for the y. (We've just made these two figures up: there's not significance about them.) The first Point, then, is this in VB:

polygonPoints(0) = New Point(50, 150)

And this in C#:

polygonPoints[0] = new Point(50, 150);

The other points are these. Add them to your button code:

VB

polygonPoints(1) = New Point(20, 65)
polygonPoints(2) = New Point(100, 10)
polygonPoints(3) = New Point(175, 65)
polygonPoints(4) = New Point(150, 150)
polygonPoints(5) = New Point(50, 150)

C#:

polygonPoints[1] = new Point(20, 65);
polygonPoints[2] = new Point(100, 10);
polygonPoints[3] = new Point(175, 65);
polygonPoints[4] = new Point(150, 150);
polygonPoints[5] = new Point(50, 150);

Notice how the last point above has the same coordinates as the first one. This is so that the polygon can be closed. Here's the polygon again, with the array positions:

Now that we have a series of points, we can add a new draw option and an Invalidate command:

drawOptions = 4
Invalidate( )

In your Paint event, add a Case 4 option to your Select Case or switch statement. Now add the following for it:

VB

Case 4

e.Graphics.DrawPolygon( Pens.Black, polygonPoints )

C#

case 4:

e.Graphics.DrawPolygon( Pens.Black, polygonPoints );
break;

So the Subroutine we're using is called DrawPolygon. The first argument between the round brackets is for the Pen you want to use. The second argument is the array of polygon points you want to use.

Your button code should look like this in VB (we've added a SmoothingMode line):

And this in C#:

Run your programme and click your Polygon button. Your form should then look like ours below:

You can have as many polygon points as you want, creating some weird and wonderful shapes! Or if you can get hold of any map data as polygon points, thereby enabling you to create your own area maps.

Other Fill Styles

You don't have to fill your shapes with solid colours. The NET framework allows you to set up something called a HatchBrush, which has lots more fill options for you. We'll see how it works by filling the Polygon we've just drawn with some cross-hatching.

The HatchBrush class is one of the Drawing2D classes. So add the following to the very top of your coding window, where you have the Rectangle variables and polygon points array set up:

VB

Dim hatchBrush As Drawing2D.HatchBrush

In C#, you can add the following using statement to the top of your code, with all the other:

using System.Drawing.Drawing2D;

Then your line to add, where you have the Rectangle variables, is just this:

HatchBrush hatchBrush;

To create a new HatchBrush object, the syntax is this:

hatchBrush = New Drawing2D.HatchBrush( hatch_style, foreColour, backColour )

Type the following in your button code, just below the polygon lines (lowercase "n" for "new" in C#):

hatchBrush = New Drawing2D.HatchBrush(

As soon as you type the round bracket, you'll see a list of the available styles in VB:

In C# sharp, because you've added the using Drawing2D at the top, you'll just see HatchStyle then the ending.

But as you can see, there's quite a lot to choose from. But go with the first one on the list, the Backward Diagonal. Then type a comma. You'll see a list of foreground colours you can choose from. Select any one you like, then type another comma. The background colours will appear. Again, select anyone that takes your fancy. Then type the closing round bracket. When you're done, the code in round brackets will look something like this in VB:

HatchBrush( Drawing2D.HatchStyle.BackwardDiagonal, Color.DarkCyan, Color.Aqua )

In C#, you just need to add this between the round brackets of HatchBrush:

HatchBrush(HatchStyle.BackwardDiagonal, Color.DarkCyan, Color.Aqua);

Just like the FillRectangle option, there's a FillPolygon option for the Graphics Subroutine. Add the following to your Case 4 code, just below your DrawPolygon line:

VB

e.Graphics.FillPolygon( hatchBrush, polygonPoints )

C#

e.Graphics.FillPolygon( hatchBrush, polygonPoints );

The first argument for FillPolygon is the brush you want to use, which is a hatchBrush for us. The second argument is the array of polygon points that you want to fill.

You can add another SmoothingMode line, if you want.

But your code should now be similar to ours in VB:

And here it is in C#:

But run your programme and click your Polygon button. Your filled polygon should look something like ours:

In the next lesson, you'll learn how to draw text on a form.

Draw Text >>

Back to the Intermediate Programming Contents Page

In Figure P3.6 Draw Acceleration Polygon Using Scale 1 100

Source: https://www.homeandlearn.co.uk/extras/graphics/graphics-draw-polygon.html

Share this post