Adding Colors, Pens, and Brushes to the GDI+Painter Application

In this article I will explain about working with brushes and pens in GDI+.


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.jpg

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.jpg

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.

bookGDI.jpg
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.