Overriding the Draw() Method

You can create a custom interface appearance by deriving your own control types from the RTPEG-32 control types. For example, you may want to define a button type that has an appearance different from the standard RTPEG-32 button types provided.

The following code listings illustrate creating a new PegButton derived class, and overriding the Draw() function to generate a custom button appearance. In this case we are going to draw a wide button border, and use custom colors for the button client area and text. This example code can also be found in the example program file Robot\Robobutn.cpp. The following is the class definition for the RoboButton class:

class RoboButton : public PegButton 
{ 
   public: 
      RoboButton(PegRect &R, PEGUINT wId, PEGCHAR *Text); 
      void Draw(void); 
      void DataSet(PEGCHAR * Text) 
      { 
         mpText = Text; 
         Screen()->Invalidate(mClient); 
      } 
   private: 
      PEGCHAR * mpText; 
};

The above class definition tells the compiler that we are defining a new class based on PegButton. This definition also informs the compiler that we are going to override the PegButton Draw() function, since we have defined a function named Draw() with the same return type and parameters as are defined in the virtual PegButton Draw() function. Note: If your parameter list does not match the base class parameter list, the compiler will assume that you are overloading, not overriding, a base class function.

The following listing is the Draw() function implementation for the RoboButton class:

void RoboButton::Draw(void) 
{ 
   PegColor Color; 

   BeginDraw();                             // Note¹

   if (Style() & BF_SELECTED)               // Note²
      Color.uForeground = BLACK; 
   else 
      Color.uForeground = LIGHTGRAY; 

   // draw the top:                         // Note³
   Line(mReal.wLeft, mReal.wTop, mReal.wRight, mReal.wTop,Color, 3); 

   // draw the left: 
   Line(mReal.wLeft, mReal.wTop, mReal.wLeft, mReal.wBottom, Color, 3); 

   if (Style() & BF_SELECTED)               // Note⁴
      Color.uForeground = LIGHTGRAY; 
   else 
      Color.uForeground = BLACK; 

   // draw the right shadow: 
   Line(mReal.wRight, mReal.wTop, mReal.wRight, mReal.wBottom-2, Color, 1); 
   Line(mReal.wRight-1, mReal.wTop+1, mReal.wRight-1, mReal.wBottom-2, Color, 1); 
   Line(mReal.wRight-2, mReal.wTop+2, mReal.wRight-2, mReal.wBottom-2, Color, 1); 

   // draw the bottom shadow: 
   Line(mReal.wLeft, mReal.wBottom, mReal.wRight, mReal.wBottom, Color, 1); 
   Line(mReal.wLeft+1, mReal.wBottom-1, mReal.wRight, mReal.wBottom-1, Color, 1); 
   Line(mReal.wLeft+2, mReal.wBottom-2, mReal.wRight, mReal.wBottom-1, Color, 1); 

   // fill in the button client area: 
   Color.Set(LIGHTRED, DARKGRAY, CF_FILL); 
   Rectangle(mClient, Color);               // Note⁵

   // draw the text centered: 
   PegPoint Put; 
   Put.x = (mClient.wLeft+mClient.wRight) >> 1; 
   Put.x -= TextWidth(mpText, &SysFont) >> 1; 
   Put.y = mClient.wTop+1; 

   if (Style() & BF_SELECTED) 
   { 
      Put.x++; 
      Put.y++; 
   } 

   Color.Set(WHITE, BLACK, CF_NONE); 
   DrawText(Put, mpText, Color, &SysFont);  // Note⁶
   EndDraw();                               // Note⁷
}

1	Always start a custom drawing function with BeginDraw(). This call informs the screen driver that drawing is about to begin. If this button is being drawn as part of a larger window drawing operation, the screen driver will recognize that this is a nested call to BeginDraw().
2	This if statement is testing the button style flag BF_SELECTED to determine if the button is depressed. If the button is depressed, we want to draw the button shadow on the top and left, instead of on the right and bottom. This provides the 3D action desired for this button class.
3	This line is using the "Line" wrapper function of PegThing to call the PegScreen::Line() function. The line endpoints, color and width are passed to the Line() function. In this case we are drawing a 3-pixel wide line, to create a wide button border.
4	We are again testing the button style flag BF_SELECTED to toggle the border colors.
5	On this line we are using the wrapper function Rectangle() to draw a rectangle on the screen. The rectangle will have a RED border, and will be filled with the color DARKGRAY. This will fill the client area of the button.
6	After calculating where to draw the button text, this call writes the text for the button on the button face using the RTPEG-32 font SysFont. Any other custom font could be used just as well.
7	The Draw() function must end with a call to EndDraw() to inform the screen driver that drawing is complete. A common mistake is to forget to call the EndDraw() function, which can cause unpredictable results in terms of screen appearance.

Left Programming with RTPEG-32

Drawing to the Screen

Down Drawing to Memory