Drawing: First Lesson

Introduction

Microsoft Windows and Borland C++ Builder provide you with the ability to draw graphics, such as geometric figures on a control. Drawing is usually performed on a special object called the canvas. Like the AnsiString class, the canvas object is available on all controls that would need drawing at one time or another. In reality, the canvas is an instance of the TCanvas class, which you can tremendously benefit from studying.

Drawing a Line

Drawing a line is usually a two-step process but depends on your intention. For example, the first thing you should do is to let the compiler know where the line would start. This information is communicated through the TCanvas::MoveTo() method. This method takes two arguments, x and y, that represent the point where the line would start. To draw a line from point A to point B, you use the TCanvas::LineTo() method. This method also takes two arguments that specify the end point of the line. Here is an example that uses both methods in the OnPaint event of a form:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormPaint(TObject *Sender)
{
    this->Canvas->MoveTo(20, 15);
    this->Canvas->LineTo(150, 245);
}
//---------------------------------------------------------------------------

If you want users to draw their own line, you can use the mouse events of the object on which you want to draw. You would need to declare some helpful variables, a point object that would store the starting point of the line. These three variables can be declared as follows:

//--------------------------------------------------------------------------- #ifndef Unit1H #define Unit1H //--------------------------------------------------------------------------- #include <Classes.hpp> #include <Controls.hpp> #include <StdCtrls.hpp> #include <Forms.hpp> //--------------------------------------------------------------------------- class TForm1 : public TForm { __published: // IDE-managed Components private: int StartX, StartY; // User declarations public: // User declarations __fastcall TForm1(TComponent* Owner); }; //--------------------------------------------------------------------------- extern PACKAGE TForm1 *Form1; //--------------------------------------------------------------------------- #endif

Users usually draw a line by clicking and holding the mouse where the line would start. This is done in the OnMouseDown event of the object on which you want them to draw. Although I prefer drawing on a TPaintBox or a TBitmap object, for this example, we will draw directly on the form. Therefore, we can simply implement the event as follows:

//--------------------------------------------------------------------------- void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y) { // Reserve the starting point of the line // using our own StartX and StartY StartX = X; StartY = Y; } //---------------------------------------------------------------------------

Users stop drawing a line by releasing the mouse, which is equivalent to the OnMouseUp event. To implement this event, you can use the previously reserved point to start the line. Then use the current point where the user is releasing the mouse as the end point of the line. The even can be implemented as follows:

//--------------------------------------------------------------------------- void __fastcall TForm1::FormMouseUp(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y) { // Start the line on the previous point we reserved this->Canvas->MoveTo(StartX, StartY); // End the line on the current point this->Canvas->LineTo(X, Y); } //---------------------------------------------------------------------------

Drawing and Colors

Drawing is performed on a TCanvas object using a color assigned to the TPen object. A TPen instance is available whenever you are using a canvas because it is declared a member of the TCanvas class. This means that, unlike the Win32 application, you don't have to explicitly create a pen object. By using a canvas, a TPen object is implicitly made available. By default, the color assigned to a pen is black. Therefore, the above line would be drawn in black. You can programmatically change the color by calling the Pen member variable of the canvas before completing the line. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormMouseUp(TObject *Sender, TMouseButton Button,
      TShiftState Shift, int X, int Y)
{
    // Set the red color to the pen of the convas
    this->Canvas->Pen->Color = clRed;
    // Start the line on the previous point we reserved
    this->Canvas->MoveTo(StartX, StartY);
    // End the line on the current point
    this->Canvas->LineTo(X, Y);
}
//---------------------------------------------------------------------------

If the users are allowed to draw their own lines, a useful feature ther may need is the ability to select a color for a graphic they are drawing. Of course, the VCL provides tremendous abilities to provide this feature. The simplest and the easiest control you can use for color selection is the ColorGrid. The ColorGrid provides two selected colors: ForegroundColor and BackgroundColor. Regardless of their names, these properties can be used any way you want. For example, you can use the ForegroundColor property as the pen color. Here is an example:

//--------------------------------------------------------------------------- void __fastcall TForm1::FormMouseUp(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y) { // Set the color of the pen to the color // selected on the Color Grid control this->Canvas->Pen->Color = CColorGrid1->ForegroundColor;; // Start the line on the previous point we reserved this->Canvas->MoveTo(StartX, StartY); // End the line on the current point this->Canvas->LineTo(X, Y); } //---------------------------------------------------------------------------