• Line width

• Line colour

• Direction

This is where the whole idea of customisation comes in.  If you want to, you could add in any variables you think are necessary... you could add in code to draw dotted lines, for example.  However, we'll stick with the basics for now.

One thing you should have spotted is that we don't actually need to store the line width and colour, as they are properties of the canvas's pen.  This is very handy.  However, we will need to add in a variable for the direction, as well as get and set functions.  Change the private section of the component to look like this:

private
  { Private declarations }
  FLineDir: TLineDirection;

  function GetLineWidth: Integer;
  function GetLineColour: TColor;
  procedure SetLineWidth(const NewWidth: Integer);
  procedure SetLineColour(const NewColour: TColor);
  procedure SetLineDir(const NewDir: TLineDirection);

Even though we haven't got variables for the line width and colour, we still need functions to set and retrieve the values from the component's canvas. This is because these three values will be properties of TLine, and properties want you to say how they will read/write, remember? Note we don't need a get function for FLineDir because we can just let the property read its value directly from the variable.

The "F" before LineDir is a bit of notation. It stands for "field", and just means the variable belongs to the class. This makes it a bit easier when writing your component to avoid mixing up local variables with class members.

Right, we've declared the functions so I suppose we'd better implement them. Bung this code in after the implementation section (look for the "implementation" keyword in your file and add this immediately after it):

function TLine.GetLineWidth: Integer;
begin
  Result := Canvas.Pen.Width;
end;

function TLine.GetLineColour: TColor;
begin
  Result := Canvas.Pen.Color;
end;

procedure TLine.SetLineWidth(const NewWidth: Integer);
begin
  if NewWidth <> Canvas.Pen.Width then
  begin
    Canvas.Pen.Width := NewWidth;
    Invalidate; // redraws the component
  end;
end;

procedure TLine.SetLineColour(const NewColour: TColor);
begin
  if NewColour <> Canvas.Pen.Color then
  begin
    Canvas.Pen.Color := NewColour;
    Invalidate;
  end;
end;

procedure TLine.SetLineDir(const NewDir: TLineDirection);
begin
  if NewDir <> FLineDir then
  begin
    FLineDir := NewDir;
    Invalidate;
  end;
end;

The get functions are very self-explanatory. They just nab the values from the Canvas and pass them along. However, the set functions are slightly more complex than just setting the variables.

When the set function gets called, we only want to change the appropriate value if necessary. After all, since it's a visual control any unnecessary changes will be apparent to the user (e.g. setting the line direction to the same value again shouldn't cause a redraw). Each of the set functions checks if the new value is different to the current one. If, and only if, it is then we need to change the value and cause a redraw.

   Question, Suggestions...
If you have any questions or comments to this (huge) article, please post them on the Delphi Programming Forum. Discuss!