Points, Sizes and Rectangles
 |
 |
A fundamental concept for any graphics system is the way that positions or sizes are represented. GDI+ uses specialist objects that enable you to specify a point in two dimensional space, a size or a complete rectangle having both location and size.
Points
Coordinates in GDI+ are represented by the Point or PointF structures. These both contain an X and Y member that hold the coordinates for the two axes of the drawing surface. Point structures store the values as integers and PointF structures store them as floating point values. Remember that GDI+ uses floating point values internally so the values in the Point structure will be interpreted by the drawing system as a float or a single for the purpose of creating the graphics.
Some drawing methods, such as DrawLine, are overloaded to accept either X,Y coordinate values or two Point or PointF structures as parameters. The following listing shows two line drawing directives that are functionally identical.
myGraphics.DrawLine(Pens.Black,10,20,210,50);
Point p1=new Point(10,20);
Point p2=new Point(210,50);
myGraphics.DrawLine(Pens.Black,p1,p2);
myGraphics.DrawLine(Pens.Black,10,20,210,50)
Dim p1 As new Point(10,20)
Dim p2 As new Point(210,50)
myGraphics.DrawLine(Pens.Black,p1,p2)
You can see that the first line takes discrete values and the second directive takes points that were created earlier.
Sizes
Sizes in GDI+ are specified by Width and Height. Just like the Point and PointF, the size comes in two flavours, Size and SizeF with the first storing Width and Height as integers and the second storing them as floating point float or Single values.
Rectangles
Shapes drawn on GDI+ surfaces, such as ellipses or rectangles, are defined by their location which corresponds to the top-left corner of the shape and their width and height defined by a size structure. These two entities, Location and Size are most often used to create a single rectangle definition. Continuing the pattern seen in Points and Sizes, the rectangle too has integer and floating-point versions Rectangle and RectangleF.
Internally, the Rectangle stores the X and Y position of the top-left corner, the Width and the Height. These may be read or manipulated as Location and Size. The Rectangle will also return useful values such as Left, Right, Top and Bottom as individual values.
The code shown in listing 2 creates the effect shown in Figure 1.
Figure 1. Check it out.
Listing 1
private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
//Divide the client rectangle up..
SizeF smallSquareSize=new SizeF(0.1f*this.ClientRectangle.Width,
0.1f*this.ClientRectangle.Height);
//create the brush
SolidBrush sb=new SolidBrush(Color.White);
//toggle between black and white squares
bool toggle=false;
//ten steps down
for(int y=0; y<10; y++)
{
//ten steps across
for(int x=0; x<10; x++)
{
//select the brush colour
if(toggle)
sb.Color=Color.Black;
else
sb.Color=Color.White;
//create a rectangle
RectangleF rc=new RectangleF( x*smallSquareSize.Width,
y*smallSquareSize.Height,
smallSquareSize.Width,
smallSquareSize.Height);
//fill it with the colour
e.Graphics.FillRectangle(sb,rc);
//swop the colour
toggle=!toggle;
}
//swop the colour at the line ends
toggle=!toggle;
}
//recycle the brush
sb.Dispose();
}
Private Sub Form1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
'Divide the client rectangle up..
Dim smallSquareSize As New SizeF(0.1F * Me.ClientRectangle.Width, _
0.1F * Me.ClientRectangle.Height)
'create the brush
Dim sb As New SolidBrush(Color.White)
'toggle between black and white squares
Dim toggle As Boolean = False
'ten steps down
Dim y As Integer
For y = 0 To 9
'ten steps across
Dim x As Integer
For x = 0 To 9
'select the brush colour
If toggle Then
sb.Color = Color.Black
Else
sb.Color = Color.White
End If 'create a rectangle
Dim rc As New RectangleF(x * smallSquareSize.Width, _
y * smallSquareSize.Height, _
smallSquareSize.Width, _
smallSquareSize.Height)
'fill it with the colour
e.Graphics.FillRectangle(sb, rc)
'swop the colour
toggle = Not toggle
Next x
'swop the colour at the line ends
toggle = Not toggle
Next y
'recycle the brush
sb.Dispose()
End Sub 'Form1_Paint
Using these structures
GDI+ methods use Point, PointF, Size, SizeF, Rectangle and RectangleF structures everywhere. You will find that arrays of Point structures can be used to define polygons, rectangles are used for shapes, boundaries of objects or defining where you can draw. These structures also interact to do cool stuff too.
Rectangle and RectangleF enable you to check if a certain point is inside the rectangle using the Contains method. This is useful for hit-testing objects. You can obtain the Union of a two rectangles, this is a larger rectangle that covers both parts of the union. You can find out which part of two rectangles overlap using the Intersect method or if it overlaps another using the IntersectsWith method. A rectangle may be moved bodily using the Offset method or made larger or smaller with the Inflate method, inflating with a negative number deflates the rectangle.
Keep an eye open for nifty uses of points, sizes and rectangles throughout this series of articles.
Return to the Beginners Guide main index
Stroking and filling.
|
|
|
The technique of drawing lines on the Graphics surface is called stroking. A Pen object will follow a line, drawing as it goes, to create the outline shape of the object being drawn. In the case of an open figure, one who's end point does not coincide with it's start point, the line will have distinct ends. For a closed figure, the stroke will be drawn from the start point and continue all around the figure until it reaches the start again and closes the shape.
For enclosed shapes such as rectangles, ellipses or polygons made from arrays of coordinates, the area surrounded by the defined outline can be filled with a colour, a complex colour containing many shades or even a picture. Filling is done using a Brush object.
The GDI+ Graphics object has a set of methods which are specially designed to enable you to stroke or fill lines and shapes. These methods are:
-
DrawLine. Draws a single line from one coordinate to another.
-
DrawLines. Draws a series of lines defined in an array of X,Y coordinates.
-
DrawRectangle. Strokes a rectangle specified by position, width and height.
-
DrawRectangles. Strokes an array of rectangles one by one.
-
FillRectangle. Fills a rectangle specified by position, width and height.
-
FillRectangles. Fills an array of rectangles one by one.
-
DrawEllipse. Strokes an ellipse defined by position, width and height;
-
FillEllipse. Fills an ellipse specified by position, width and height.
-
DrawPolygon. Strokes a polygonal shape defined in an array of X,Y coordinates.
-
FillPolygon. Fills a polygonal shape defined in an array of X,Y coordinates.
-
DrawCurve. Strokes a cardinal spline defined in an array of X,Y coordinates.
-
DrawClosedCurve. Strokes a closed Cardinal Spline defined in an array of X,Y coordinates.
-
DrawBezier. Strokes a Bezier curve defined as X,Y coordinates for the nodes and control points.
-
DrawPath. Strokes a Path object. A Path is a collection of lines and shapes in one easy-to-use container.
-
FillPath. Fills a Path object.
-
DrawArc. Strokes an arc segment. An arc is a section of an ellipse.
-
DrawPie. Strokes a pie-shaped area.
-
FillPie. Fills a pie-shaped area.
-
FillRegion. Fills a Region object.
The image seen in Figure 1 shows some of the most basic stroking and filling operations you can carry out with GDI+.
Figure 1. Simple stroking and filling.
Listing 1 shows the draw code that creates this image.
protected override void OnPaint(PaintEventArgs e)
{
//Get the Graphics object
Graphics g=e.Graphics;
//Draw a line using discrete coordinates
g.DrawLine(Pens.Red,10,5,110,15);
//Draw a line using points
Point p1=new Point(10,8);
Point p2=new Point(110,18);
e.Graphics.DrawLine(Pens.Plum,p1,p2);
//Draw a polygon using an array of PointF structures.
PointF[] pts=new PointF[20];
float angle=0;
for(int x=0; x<20; x++)
{
pts[x]=new PointF(x*10,(float)(30+(15*Math.Sin(angle))));
angle+=(float)Math.PI/10;
}
e.Graphics.DrawLines(Pens.Blue,pts);
//fill ellipses over each of the points in the sin curve.
foreach(PointF p in pts)
e.Graphics.FillEllipse(Brushes.Green,new RectangleF(p.X-3,p.Y-3,6f,6f));
//Create a closed polygon, fill it and stroke it.
Point[] poly=new Point[5]{
new Point(20,50),
new Point(200,100),
new Point(200,50),
new Point(20,100),
new Point(20,50)
};
e.Graphics.FillPolygon(Brushes.Tomato,poly);
Pen pen=new Pen(Color.Tan,4);
e.Graphics.DrawPolygon(pen,poly);
pen.Dispose();
//Create an array of rectangles, fill them and stroke them
Rectangle[] rcs=new Rectangle[10];
for(int x=1; x<11; x++)
rcs[x-1]=new Rectangle(80-(x*5),110+(x*12),x*10,12);
e.Graphics.FillRectangles(Brushes.RoyalBlue,rcs);
e.Graphics.DrawRectangles(Pens.YellowGreen,rcs);
base.OnPaint (e);
}
Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
'Get the Graphics object
Dim g As Graphics = e.Graphics
'Draw a line using discrete coordinates
g.DrawLine(Pens.Red, 10, 5, 110, 15)
'Draw a line using points
Dim p1 As New Point(10, 8)
Dim p2 As New Point(110, 18)
e.Graphics.DrawLine(Pens.Plum, p1, p2)
'Draw a polygon using an array of PointF structures.
Dim pts(19) As PointF
Dim angle As Single = 0
Dim x As Integer
For x = 0 To 19
pts(x) = New PointF(x * 10, CSng(30 + 15 * Math.Sin(angle)))
angle += CSng(Math.PI) / 10
Next x
e.Graphics.DrawLines(Pens.Blue, pts)
'fill ellipses over each of the points in the sin curve.
Dim p As PointF
For Each p In pts
e.Graphics.FillEllipse(Brushes.Green, New RectangleF(p.X - 3, p.Y - 3, 6.0F, 6.0F))
Next p
'Create a closed polygon, fill it and stroke it.
Dim poly() As Point = {New Point(20, 50), New Point(200, 100), New Point(200, 50), New Point(20, 100), New Point(20, 50)}
e.Graphics.FillPolygon(Brushes.Tomato, poly)
Dim pen As New Pen(Color.Tan, 4)
e.Graphics.DrawPolygon(pen, poly)
pen.Dispose()
'Create an array of rectangles, fill them and stroke them
Dim rcs(9) As Rectangle
For x = 1 To 10
rcs((x - 1)) = New Rectangle(80 - x * 5, 110 + x * 12, x * 10, 12)
Next x
e.Graphics.FillRectangles(Brushes.RoyalBlue, rcs)
e.Graphics.DrawRectangles(Pens.YellowGreen, rcs)
MyBase.OnPaint(e)
End Sub 'OnPaint
Exercise.
Using what you've learned in this article, create a program that displays the image shown in Figure 2
Figure 2. Can you solve it?
For a clue, the yellow square is 500 pixels on each side.
评论