Graphics

This code is based on our demonstration of the Graph unit using Brian Long's sample program ArchimedianSpiralApplet to get us started. The Graphics object in Oxygene has methods to draw the shapes, but the some of the parameters are different from those in the Lazarus (Free Pascal) Graph unit. For example, now we supply after the co-ordinates of the top left vertex of a rectangle its width and height instead of the co-ordinates of its bottom right vertex. Note how to select the font of text.

There are several other methods of the graphics object to experiment with, and further functionality in the Graphics2D object. We provide an example of the use of a BufferedImage in the Oxygene version of MultiDraw. This program handles input from the keyboard and mouse.

We supply below for the graphics demonstration:

  1. the code of graphics_demo.pas (written in the Lazarus editor);
  2. a slimmed-down xml project file (graphics_demo.oxygene) to be opened in Visual Studio or used by the command line instruction msbuild graphics_demo.oxygene;
  3. a simple HTML file to run the applet;
  4. a screenshot of the web page;
  5. equivalent code in RemObjects C# for Java.

Oxygene for Java code

namespace graphics_demo;

interface

uses
  java.util, java.applet.*, java.awt;

type
  graphics_demo = public class(Applet)
  private
    const
      HB = 10;     //Horizontal border
      VB = 10;     //Vertical border

    var
      Width, Height, RectWidth, RectHeight, Col1, Col2, Col3, Row1, Row2, Row3,
      Count, StartX, StartY, X, Y: Integer;
      PentangleX, PentangleY: array[0..5] of Integer;
      TriangleX, TriangleY: array[0..3] of Integer;
      myfont : Font;

  public
    method init(); override;
    method paint(g: Graphics); override;
  end;

implementation

method graphics_demo.init();
begin
  Width := Size.width;
  Height := Size.height;
  Background := Color.gray;
  Col1 := Width DIV 4;  //End of column
  Col2 := Width DIV 2;
  Col3 := Col1 + Col2;
  Row1 := Height DIV 4;   //End of row
  Row2 := Height DIV 2;
  Row3 := Row1 + Row2;
  RectWidth := Col1 - 2 * HB;
  RectHeight := Row1 - 2 * VB;
  PentangleX[0] := (Col3 + Col2) DIV 2;
  PentangleY[0] :=  Row2 + VB;
  PentangleX[1] :=  Col3 - HB;
  PentangleY[1] :=  (Row2 + Row3) DIV 2;
  PentangleX[2] := Col3 - (Col1 DIV 3);
  PentangleY[2] :=  Row3 - VB;
  PentangleX[3] :=  Col2 + (Col1 DIV 3); 
  PentangleY[3] :=  Row3 - VB;
  PentangleX[4] :=  Col2 +  HB;
  PentangleY[4] :=  (Row2 + Row3) DIV 2;
  PentangleX[5] := PentangleX[0]; 
  PentangleY[5] := PentangleY[0];
  TriangleX[0] := (Col3 + Width) DIV 2; 
  TriangleY[0] :=  Row2 + VB;
  TriangleX[1] :=  Width - HB;
  TriangleY[1] :=  Row3 - VB;
  TriangleX[2] :=  Col3 + HB; 
  TriangleY[2] :=  Row3 - VB;
  TriangleX[3] :=  TriangleX[0];
  TriangleY[3] :=  TriangleY[0];
  myfont := new Font('TimesRoman', Font.BOLD, 16);
end;

method graphics_demo.paint(g: Graphics);
begin
  //Row 1
  //Red rectangle
  g.setColor(Color.red);
  g.drawRect(HB , VB, RectWidth, RectHeight);
  g.setColor(Color.yellow);
  g.fillRect(Col1 + HB, VB, RectWidth, RectHeight);
  //Green circle
  g.setColor(Color.green);
  g.drawOval(Col2 + HB + (Col1 - Row1) / 2, VB, RectHeight, RectHeight);
  g.setColor(Color.blue);
  g.fillOval(Col3 + HB, VB, RectWidth, RectHeight);
  //Row 2
  //Cyan line
  g.setColor(Color.cyan);
  g.drawLine (HB, Row1 + VB, Col1 - HB, Row2 - VB);
  //Orange line
  g.setColor(Color.orange);
  g.drawLine(Col1 + HB, Row2 - VB, Col2 - HB, Row1 + VB);
  //White ellipse
  g.setColor(Color.white);
  g.drawOval(Col2 + HB, Row1 + VB, RectWidth, RectHeight);
  //Magenta filled circle
  g.setColor(Color.magenta);
  g.fillOval(Col3 + HB + (Col1 - Row1)/2, Row1 + VB, RectHeight, RectHeight);
  //Row 3
  //Black arc
  g.setColor(Color.black);
  g.drawArc(HB, Row2 + VB, RectWidth, RectHeight, 0, 270);
  //cyan rounded rectangle
  g.setColor(Color.cyan);
  g.drawRoundRect(Col1 + HB, Row2 + VB, RectWidth, RectHeight, 20, 20);
  //Dark gray pentagon
  g.setColor(Color.darkGray);
  g.drawPolygon(PentangleX, PentangleY, 6);
  //Filled pink triangle
  g.setColor(Color.pink);
  g.fillPolygon(TriangleX, TriangleY, 4);
  //Row 4
  //Magenta sector of ellipse
  g.setColor(Color.magenta);
  g.fillArc(HB, Row3 + VB, RectWidth, RectHeight, 270, 90);
  //Points (tiny rectangles) for straight lines
  g.setColor(Color.black);
  for Count := 1 to (Row1 DIV 2) - VB do
    begin
      g.fillRect(Col1 + HB + Count, Row3 + VB + Count, 2, 2);
    end;
  StartX := Col1 + HB + Count;
  StartY := Row3 + VB + Count;
  for Count := 1 to (Row1 DIV 2) - VB do
    begin
      g.fillRect(StartX + Count, StartY - Count, 2, 2);
    end;
  //Yellow text
  g.setColor(Color.yellow);
  g.setFont(myfont);
  g.drawString('www.pp4s.co.uk', Col1 + HB, (Row3 + Height) DIV 2 + 20);
  //Black squares forming curve
  g.setColor(Color.black);
  for Count := 1 to 15 do
    begin
      X := Col2 + HB + (Count * 10);
      Y := Row3 + VB + (Count * Count) DIV 4;
      g.fillRect(X, Y, 2, 2);
    end;
  //Green arc
  g.setColor(Color.green);
  g.drawArc(Col3 + HB + (Col1 - Row1) / 2, Row3 + VB, RectHeight, RectHeight, 0, 180);  
end;

end.

Project file

<?xml version="1.0" encoding="utf-8"?>
<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003" ToolsVersion="4.0">
  <PropertyGroup>
    <ProductVersion>3.5</ProductVersion>
    <OutputType>Library</OutputType>
    <Configuration Condition="'$(Configuration)' == ''">Release</Configuration>  
    <RootNamespace>graphics_demo</RootNamespace>    
    <AssemblyName>graphics_demo</AssemblyName>  
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)' == 'Release' ">
    <Optimize>true</Optimize>
    <OutputPath>.\bin\Release</OutputPath>
    <GenerateDebugInfo>False</GenerateDebugInfo>
    <GenerateMDB>False</GenerateMDB>
    <EnableAsserts>False</EnableAsserts>
    <TreatWarningsAsErrors>False</TreatWarningsAsErrors>
    <CaptureConsoleOutput>False</CaptureConsoleOutput>
    <StartMode>Project</StartMode>
    <RegisterForComInterop>False</RegisterForComInterop>
    <CpuType>anycpu</CpuType>
    <RuntimeVersion>v25</RuntimeVersion>
    <XmlDoc>False</XmlDoc>
    <XmlDocWarningLevel>WarningOnPublicMembers</XmlDocWarningLevel>
    <WarnOnCaseMismatch>True</WarnOnCaseMismatch>
    <EnableUnmanagedDebugging>False</EnableUnmanagedDebugging>
  </PropertyGroup>
  <ItemGroup>
    <Reference Include="rt.jar" />
  </ItemGroup>
  <ItemGroup>
    <Compile Include="graphics_demo.pas" />
  </ItemGroup>
  <ItemGroup>
    <Folder Include="Properties\" />
  </ItemGroup>  
  <Import Project="$(MSBuildExtensionsPath)\RemObjects Software\Oxygene\RemObjects.Oxygene.Cooper.targets" />
</Project>


HTML file

<html>
<head>
   <title>Oxygene for Java Graphics Demo Applet</title>
</head>
<body>
   <h1 align="Center">Oxygene for Java Graphics Demo Applet</h1>
   
   <center>
     ( <font color="red">You need to enable Java to see this applet.</font> )
      <applet archive="graphics_demo.jar" code="graphics_demo/graphics_demo.class"
              codebase="bin/Release" width="600" height="400">           
      </applet>
    </center>
</body>
</html>

Screenshot

Web page

RemObjects C# for Java code

using java.util;
using java.applet;
using java.awt;

namespace graphics_demo_cs
{
  public class graphics_demo_cs : Applet
  {
    private
      Integer  HB = 10;     //Horizontal border
      Integer  VB = 10;     //Vertical border
      Integer Width, Height, RectWidth, RectHeight, Col1, Col2, Col3, Row1, Row2, Row3,
      StartX, StartY, X, Y;
      Integer[] PentangleX = new Integer[6];
      Integer[] PentangleY = new Integer[6];
      Integer[] TriangleX = new Integer[4];
      Integer[] TriangleY = new Integer[4];
      Font myfont;

    public override void init()
    {
      Width = Size.width;
      Height = Size.height;
      Background = Color.gray;
      Col1 = Width / 4;  //End of column
      Col2 = Width / 2;
      Col3 = Col1 + Col2;
      Row1 = Height / 4;   //End of row
      Row2 = Height / 2;
      Row3 = Row1 + Row2;
      RectWidth = Col1 - 2 * HB;
      RectHeight = Row1 - 2 * VB;
      PentangleX[0] = (Col3 + Col2) / 2;
      PentangleY[0] = Row2 + VB;
      PentangleX[1] = Col3 - HB;
      PentangleY[1] = (Row2 + Row3) / 2;
      PentangleX[2] = Col3 - (Col1 / 3);
      PentangleY[2] = Row3 - VB;
      PentangleX[3] = Col2 + (Col1 / 3); 
      PentangleY[3] = Row3 - VB;
      PentangleX[4] = Col2 +  HB;
      PentangleY[4] = (Row2 + Row3) / 2;
      PentangleX[5] = PentangleX[0]; 
      PentangleY[5] = PentangleY[0];
      TriangleX[0] = (Col3 + Width) / 2; 
      TriangleY[0] = Row2 + VB;
      TriangleX[1] = Width - HB;
      TriangleY[1] = Row3 - VB;
      TriangleX[2] = Col3 + HB; 
      TriangleY[2] = Row3 - VB;
      TriangleX[3] =  TriangleX[0];
      TriangleY[3] =  TriangleY[0];
      myfont = new Font("TimesRoman", Font.BOLD, 16);
    }

    public override void paint(Graphics g)
    {
      //Row 1
      //Red rectangle
      g.setColor(Color.red);
      g.drawRect(HB , VB, RectWidth, RectHeight);
      g.setColor(Color.yellow);
      g.fillRect(Col1 + HB, VB, RectWidth, RectHeight);
      //Green circle
      g.setColor(Color.green);
      g.drawOval(Col2 + HB + (Col1 - Row1) / 2, VB, RectHeight, RectHeight);
      g.setColor(Color.blue);
      g.fillOval(Col3 + HB, VB, RectWidth, RectHeight);
      //Row 2
      //Cyan line
      g.setColor(Color.cyan);
      g.drawLine (HB, Row1 + VB, Col1 - HB, Row2 - VB);
      //Orange line
      g.setColor(Color.orange);
      g.drawLine(Col1 + HB, Row2 - VB, Col2 - HB, Row1 + VB);
      //White ellipse
      g.setColor(Color.white);
      g.drawOval(Col2 + HB, Row1 + VB, RectWidth, RectHeight);
      //Magenta filled circle
      g.setColor(Color.magenta);
      g.fillOval(Col3 + HB + (Col1 - Row1)/2, Row1 + VB, RectHeight, RectHeight);
      //Row 3
      //Black arc
      g.setColor(Color.black);
      g.drawArc(HB, Row2 + VB, RectWidth, RectHeight, 0, 270);
      //cyan rounded rectangle
      g.setColor(Color.cyan);
      g.drawRoundRect(Col1 + HB, Row2 + VB, RectWidth, RectHeight, 20, 20);
      //Dark gray pentagon
      g.setColor(Color.darkGray);
      g.drawPolygon(PentangleX, PentangleY, 6);
      //Filled pink triangle
      g.setColor(Color.pink);
      g.fillPolygon(TriangleX, TriangleY, 4);
      //Row 4
      //Magenta sector of ellipse
      g.setColor(Color.magenta);
      g.fillArc(HB, Row3 + VB, RectWidth, RectHeight, 270, 90);
      //Points (tiny rectangles) for straight lines
      g.setColor(Color.black);
      // (Integer i = 1; i <= 10; i++)
      for (Integer Count = 1;  Count <= (Row1 / 2) - VB; Count++) 
      {
        g.fillRect(Col1 + HB + Count, Row3 + VB + Count, 2, 2);
      }
      StartX = Col1 + (Col1 / 2);
      StartY = Row3 + (Row1 / 2) ;
      for (Integer Count = 1; Count <= (Row1 / 2) - VB; Count++)
      {
        g.fillRect(StartX + Count, StartY - Count, 2, 2);
      }
      //Yellow text
      g.setColor(Color.yellow);
      g.setFont(myfont);
      g.drawString("www.pp4s.co.uk", Col1 + HB, (Row3 + Height) / 2 + 20);
      //Black squares forming curve
      g.setColor(Color.black);
      for (Integer Count = 1; Count <= 15; Count++)
      {
        X = Col2 + HB + (Count * 10);
        Y = Row3 + VB + (Count * Count) / 4;
        g.fillRect(X, Y, 2, 2);
      }
      //Green arc
      g.setColor(Color.green);
      g.drawArc(Col3 + HB + (Col1 - Row1) / 2, Row3 + VB, RectHeight, RectHeight, 0, 180);  
    } 
  }
}

Programming - a skill for life!

Mouse and keyboard input, graphics (including Graphics2D), threads and widgets in Oxygene for Java applets