This article has been
excerpted from book "Graphics Programming with GDI+".
In this section we will extend the functionality of GDI+Painter by adding
support for brushes and pens. After completing this section, you will be able to
select a pen color and its width, color transparency, and brush color.
Figure 4.32 shows the modified version of GDI+Painter without any objects.
Transparency is a component of the color in GDI+. In the .NET Framework library;
the Color structure represents a color. It has four components: alpha (A), red(R),
green (G), and blue (B). The alpha component of the Color structure represents
the transparency of a color. The alpha component values vary from 0 to 255,
where 0 is fully transparent and 255 is fully opaque. Tocreate a transparent
brush or pen, we create a color using the alpha value and use the color to
create a pen or a brush.
FIGURE 4.32: GDI+ Painter with pen and brush support
The following code snippet shows how to create a color with transparency. We use
the same method to add transparency to our application.
Color clr =
Color.FromArgb(Convert.ToInt16
(TransCounter.Value.ToString()), PenBtn.BackColor.R, PenBtn.BackColor.G,
PenBtn.BackColor.B);
In our modified version of GDI+Painter, the width selector numeric up-down
control allows you to select the width of the pen. A pen is used when we draw
the outlines of graphics shapes. A brush is used when we draw filled graphics
shapes.
The Pen color and Brush color buttons launch ColorDialog, which lets us select a
color and set the color of the button itself, which later is used by the program
when creating a Pen or Brush object. Listing 4.27 shows the code for these two
button click event handlers. This code also sets the background color of the
respective buttons to set the current selected color of our brush and pen.
LISTING 4.27: Selecting pen and brush colors
private void
PenSetting_click(object sender, System.EventArgs
e)
{
ColorDialog colorDlg =
new ColorDialog();
colorDlg.ShowDialog();
PenBtn.BackColor = colorDlg.Color;
}
private void
BrushSettings_click(object sender, System.EventArgs
e)
{
ColorDialog colorDlg =
new ColorDialog();
colorDlg.ShowDialog();
BrushBtn.BackColor = colorDlg.Color;
}
When we draw a graphics shape, we set the color, width and transparency of the
pen and brush according to the selection. The last two changes in our revised
version of GDI+Painter are on the mouse-up event handler and form's paint event
handler, respectively.
The modified mouse-up event handler is shown in listing 4.28.In it; we use the
color buttons to create our current pen and brush from the selected colors.
LISTING 4.28: The mouse-up event handler
private void
Form1_MouseUp(object sender,
System.Windows.Forms.MouseEventArgs e)
{
//Set the pen's color
curPen.Color = Color.FromArgb(Convert.ToInt16(TransCounter.Value.ToString()),
PenBtn.BackColor.R, PenBtn.BackColor.G, PenBtn.Color.B);
//Set the pen's width
curPen.Width = (float)PenWidthCounter.Value;
//Set the brush's color
curBrush.Color = Color.FromArgb(Convert.ToInt16(TransCounter.Value.ToString()),
BrushBtn.BackColor.R, BrushBtn.BackColor.G, BrushBtn.BackColor.B);
diffX = x - curX;
diffY = y - curY;
switch (drawIndex)
{
case 1:
{
//Draw a line
curGraphics.DrawLine(curPen, curX, CurY, x, y);
break;
}
case 2:
{
//Draw an ellipse
curGraphics.DrawEllipse(curPen, curX, curY, diffX,
diffY);
break;
}
case 3:
{
//Draw a rectangle
curGraphics.DrawRectangle(curPen, curX, curY,
diffX, diffY);
break;
}
case 4:
{
//Fill rectangle
curGraphics.FillRectangle(curBrush, curX, curY,
diffX, diffY);
break;
}
case 5:
{
//Fill ellipse
curGraphics.FillEllipse(curBrush, curX, curY,
diffX, diffY);
break;
}
}
//Refresh
RefreshFormBackground();
//Set dragMode to false
dragMode = false;
}
The same properties are applied to the form's paint event handler, shown in
Listing 4.29. This Code sets the Color and width properties of our pen and color
property of our brush according to the current values.
LISTING 4.29: The form's paint event handler
private void
Form1_Paint(object sender,
PaintEventArgs e)
{
//Set current pen's color
curPen.Color = Color.FromArgb(Convert.ToInt16(TransCounter.Value.ToString()),
PenBtn.BackColor.R, PenBtn.BackColor.G, PenBtn.BackColor.B);
//Set pen's width
curPen.Width = (float)PenWidthCounter.Value;
//Set current brush's color
curBrush.Color = Color.FromArgb(Convert.ToInt16(TransCounter.Value.ToString()),
BrushBtn.BackColor.R, BrushBtn.BackColor.G, BrushBtn.BackColor.B);
Graphics g = e.Graphics;
//If dragMode is true , draw selected
//graphics shape
if (dragMode)
{
switch (drawIndex)
{
case 1:
{
g.DrawLine(curPen, curX, curY, x, y);
break;
}
case 2:
{
g.DrawEllipse(curPen, curX, curY, diffX, diffY);
break;
}
case 3:
{
g.DrawRectangle(curPen, curX, curY, diffX, diffY);
break;
}
case 4:
{
g.FillRectangle(curBrush, curX, curY, diffX, diffY);
break;
}
case 5:
{
g.FillEllipse(curBrush, curX, curY, diffX, diffY);
break;
}
}
}
}
If you run the revised GDI+Painter application, you can set the colors of the
brush and the pen, the pen's width, and the transparency of both the pen and the
brush. Figure 4.33 shows lines, rectangles, and ellipse drawn with different
sizes and transparency.
Improvements in GDI+Painter
You can improve the functionality of the GDI+Painter application (or your own
applications) even more: As we discussed in our examples, you can add a brush
selection feature. You can allow users to select a brush type, style, and other
properties. If user picks a gradient brush, they can select colors. You can also
allow user to select cap and line styles. For solid brushes, users should be
able to pick an image; and for hatch and gradient brushes, they should be able
to pick styles, background, foreground, and other color properties. You can even
add transformation and other options all of which we've discussed in this
article.
On the basis of this example, you can write your own graphics tool library with
support for many more option than the standard Windows PaintBrush application!
FIGURE 4.33: GDI+Painter in action
Conclusion
Hope the article would have helped you in understanding how to draw a line chart
in GDI+. Read other articles on GDI+ on the website.
| This book teaches
.NET developers how to work with GDI+ as they develop applications
that include graphics, or that interact with monitors or printers.
It begins by explaining the difference between GDI and GDI+, and
covering the basic concepts of graphics programming in Windows. |