More Graphical Diversions- Adding Color and Control

Adding Color to Shapes

There are two aspects to adding color to shapes- the perimeter of the shape and the inside of the shape.  The perimeter of the shape is painted with pens, and the inside of the shape is painted with brushes.  To change the color of your shape you simply need to change the color of the appropriate pen or brush.  In either case, you need to specify your colors using RGB color coordinates.   RGB coordinates specify the amount of red, green and blue (the primary colors of light) that you want in your color.  Remember that when you mix colors of light mixing full red, green and blue make white not black.  The range of amounts of red, green and blue you can add is from 0 (none) to 255 (all).

To create a brush or a pen of a given color you need to create a variable of type CBrush or CPen that has the color that you want.  You create this pen or brush with one of the following statements:

CBrush mybrush(RGB (r, g, b));

CPen mypen(type of line, width of line, RGB(r, g, b));

Where mybrush or mypen is a name you have given your brush or pen and r, g, and b are integers between 0 and 255.  Width of line is also an integer of value one or greater.  Type of line indicates a solid or different kinds of dashed line and must be one of the following:


Once you have created your pen or brush in the color that you want you apply it using one of the following statements:

dc.SelectObject (&mybrush);


Make sure that you include the ampersand (&) symbol before your pen or brush name.  The use of this symbol is a bit beyond where we are now, but we will get to it later.

Once you have selected your brush or pen, just draw a shape as you did before and it should be in the color you have selected.

Gaining Some Control

One of the limitations with the way we have handled programming in a windows context is that we haven't stored any values in variables.   So far the program has only responded to different kinds of mouse clicks which doesn't give the user much control over the program.  Variables can easily be added to the program that would allow the user more control over the program in the way of changing modes (such as line type or brush color).  The first step in implementing this is to create a variable that will track the mode.  You should place this variable at the top of the CNameView class just below all of the #include lines.   (Note it is not the best style to add variables here.  They should be added in the header (.h) file, but this will work too.)

Now, you can use this variable in your different mouse click functions.  In the example shown in class the clicking the right mouse button changed brush color modes from red to green to blue. 

Click Here to Download a Windows Version of the Program comptr9.gif (546 bytes)

This was accomplished using the following code:

void CDrawingView::OnLButtonDown(UINT nFlags, CPoint point) 


    // TODO: Add your message handler code here and/or call default

    CClientDC dc( this );

    CPen penRed(PS_SOLID, 2, RGB(255,0,0));

    CBrush brGreen(RGB(0,255,0));

    CBrush brBlue(RGB(0,0,255));

    CBrush brRed(RGB(255,0,0));



    else if(color==2)





    dc.Ellipse( point.x, point.y, point.x+50, point.y+50);

    CView::OnLButtonDown(nFlags, point);


void CDrawingView::OnRButtonDown(UINT nFlags, CPoint point) 


    // TODO: Add your message handler code here and/or call default




    CView::OnRButtonDown(nFlags, point);


You can see that the right click button simply rotates the variable color through a cycle of values from 1 to 3, and then loops back around.  When you click the left button, an if-then-else statement checks to see what the value of color is and sets the brush color appropriately.  The value of color was initialized to 1 in the very first function in the CNameView class as shown here:



    // TODO: add construction code here



This function is called the constructor and is executed the very first time the screen draws.  This is the place where you would initialize variables.

drawing.gif (4300 bytes)

Another way to add control to your program would be to draw some controls on the screen and change modes based on where on the screen the user clicks.   This information is received in the OnButtonDown functions in the form of point.x and point.y.  For example you could draw a red square on the screen in the upper left hand corner from 0,0 to 50,50.  Then if someone clicks in that region you could change the color of their brush to red.  This example was also illustrated in class.   See if you can figure out how to incorporate this into your program.

Try some of these techniques out to enhance your mini-assignment from last time.

Back to Home Page House3.wmf (25540 bytes)