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);  
    } 
  }
}
PrevGreen03.png
NextGreen03.png
UpGreen03.png
Programming - a skill for life!

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

  1. Mouse Input Demonstrations
    Demonstration of the handling of mouse presses, drags and moves
  2. Keyboard Input Demonstration
    Demonstration of accepting input from the keyboard in applets
  3. Demonstration of Drawing Lines
    Demonstration of line drawing in applets
  4. Demonstrations of the use of Colour
    Demonstration of different ways of drawing with different colours in applets
  5. Draw Demonstration
    Demonstration of drawing in applets
  6. Back Buffer Demonstration
    Demonstration of the handling of a back buffer in applets
  7. Thread Demonstration
    Demonstration of the handling of threads in applets
  8. Combining Jar Files
    Demonstration of extracting classes from jar files then combining them
  9. Graphics
    Demonstration of an applet with graphics
  10. Graphics2D Applets
    Applets using Graphics2D for transforms, gradient painting and pixel drawing in Oxygene for Java
  11. Image Demonstration
    Demonstration of static and moving images in applets
  12. Using Widgets in Applets
    How to use widgets such as JButtons, JTextAreas, JComboBoxes and dialogues in Oxygene for Java applets
  13. Converting Applets to Applications
    How to convert applets to applications in Oxygene for Java
dita powered logo dita powered™. Copyright © 2010-20 Pascal Programming for Schools. All rights reserved.