Drawing Shapes

Introduction

There are inbuilt classes for rectangles and circles. You can construct other shapes using a complex shape or combinations of convex shapes.

Draw lines as rectangles. Draw ellipses either by computing the points of the outline of a convex shape or by performing a scale on a circle. We show both methods in the demonstration.

We draw the axes to emphasise that, in common with most graphics systems used on this site, Y increases down the screen. We show tick marks at 50 pixel intervals.

The code follows the captured image of the output:

Captured Output

Captured Output

The Code

program ShapesDemo;
{$Apptype Gui}
uses
  SysUtils,  SfmlGraphics, SfmlSystem, SfmlWindow;
const
  WINDOW_WIDTH = 355;
  WINDOW_HEIGHT = 355;
  RADIUS_X = 50;
  RADIUS_Y = 30;
  QUALITY = 50;
  PURPLE: TSfmlColor = (R: 193; G: 93; B: 180; A: $FF);
var
  Window: TSfmlRenderWindow;
  Circle: TSfmlCircleShape;
  X_Axis, Y_Axis, TickMark, Rect: TSfmlRectangleShape;
  Pentagon, Ellipse: TSfmlConvexShape;
  i: integer;
  rad, x, y: real;
  OutputImage: PsfmlImage;
begin
  Window := TSfmlRenderWindow.Create(SfmlVideoMode(WINDOW_WIDTH, WINDOW_HEIGHT, 32),
    AnsiString('ShapesDemo'), [sfTitleBar, sfClose], nil);
  Window.SetVerticalSyncEnabled(True);
  // Clear the window to white
  Window.Clear(SfmlWhite);
  // Axes and tick marks
  X_Axis := TSfmlRectangleShape.Create;
  Y_Axis := TSfmlRectangleShape.Create;
  X_Axis.Size := SfmlVector2f(WINDOW_WIDTH, 3);
  X_Axis.Position := SfmlVector2f(0, 0);
  X_Axis.FillColor := sfmlBlack;
  Y_Axis.Size := SfmlVector2f(3, WINDOW_HEIGHT);
  Y_Axis.Position := SfmlVector2f(0, 0);
  Y_Axis.FillColor := sfmlBlack;
  Window.Draw(X_Axis);
  Window.Draw(Y_Axis);
  TickMark := TSfmlRectangleShape.Create;
  TickMark.Size := SfmlVector2f(3, 3);
  TickMark.FillColor := sfmlBlack;
  for i := 1 to 7 do
    begin
      TickMark.Position := sfmlVector2f(i * 50 - 1, 3);
      Window.Draw(TickMark);
      TickMark.Position := sfmlVector2f(3, i * 50 - 1);
      Window.Draw(TickMark);
    end;
  // Purple circle with red outline
  Circle := TSfmlCircleShape.Create;
  Circle.Radius := 30;
  SfmlCircleShapeSetOutlineColor(Circle.Handle, sfmlRed);
  SfmlCircleShapeSetOutlineThickness(Circle.Handle, 2);
  Circle.Position := SfmlVector2f(50, 50);
  Circle.FillColor := PURPLE;
  Window.Draw(Circle);
  // Convert circle to magenta ellipse
  Circle.FillColor := sfmlMagenta;
  Circle.OutlineThickness := 5;
  Circle.OutlineColor := sfmlBlack;
  Circle.Scale(sfmlVector2f(2, 1));
  Circle.Move(sfmlVector2f(100, 0));
  Window.Draw(Circle);

  // (Irregular) yellow pentagon with green outline
  Pentagon := TSfmlConvexShape.Create;
  Pentagon.PointCount := 5;
  Pentagon.Point[0] := sfmlVector2f(60, 30);
  Pentagon.Point[1] := sfmlVector2f(60, 20);
  Pentagon.Point[2] := sfmlVector2f(67.5, 10);
  Pentagon.Point[3] := sfmlVector2f(75, 20);
  Pentagon.Point[4] := sfmlVector2f(75, 30);
  Pentagon.OutlineColor := sfmlGreen;
  Pentagon.FillColor := sfmlYellow;
  Pentagon.OutlineThickness := 2;
  Pentagon.Origin := sfmlVector2f(67.5, 20);
  Pentagon.Position := sfmlVector2f(60, 250);
  // Rotate and translate the pentagon
  Pentagon.Scale(sfmlVector2f(5, 5));
  Window.Draw(Pentagon);
  Pentagon.Rotate(90);
  Pentagon.Move(sfmlVector2f(120, 0));
  Window.Draw(Pentagon);
  // Blue ellipse
  Ellipse := TSfmlConvexShape.Create;
  // Converted from C++ at http://en.sfml-dev.org/forums/index.php?topic=2009.0
  Ellipse.PointCount := QUALITY;
  for i := 1 to QUALITY do
    begin
      rad := (360 / QUALITY * i) / (360 / PI / 2);
      x := cos(rad) * RADIUS_X;
      y := sin(rad) * RADIUS_Y;
      Ellipse.Point[i - 1] := sfmlVector2f(x, y);
    end;
  Ellipse.Position := sfmlVector2f(300, 300);
  Ellipse.FillColor:= SfmlBlue;
  Window.Draw(Ellipse);
  // Green rectangle outline
  Rect := TSfmlRectangleShape.Create;
  Rect.FillColor := SfmlTransparent;
  Rect.Size := SfmlVector2f(100, 250);
  Rect.Position := SfmlVector2f(250, 50);
  Rect.OutlineColor := sfmlGreen;
  Rect.OutlineThickness := 2;
  Window.Draw(Rect);
  OutputImage := Window.Capture;
  SfmlImageSaveToFile(OutputImage, 'OutputImage.png');
  Window.Display;
  sfmlSleep(sfmlSeconds(15));
end.
    
Programming - a skill for life!

How to use the Simple Fast Media Library in Lazarus