Java Swing - Graphics
TOPIC 02 – GRAPHICS2D

 

 

LESSON NOTE

 

 

THE GRAPHICS2D CLASS

 

We have seen that the Graphics object that you get in the paint method allows us to use a variety of drawing and filling methods to create basic shapes.

 

However, there is also a Graphics2D class that provides extra functionality.  And because it extends the Graphics class, we can simply convert the Graphics objects to a Graphics2D objects.  This is done in one line.

 

Graphics2D g2d = (Graphics2D) g;

 

From the Java documentation:

 

This Graphics2D class extends the Graphics class to provide more sophisticated control over geometry, coordinate transformations, color management, and text layout. This is the fundamental class for rendering 2-dimensional shapes, text and images on the Java(tm) platform.


DRAWING OR FILLING SHAPES

 

            The Graphics2D class has the following instance methods:

 

            draw(Shape s)

            fill (Shape s)

           

            We can therefore create different shapes and simply draw them on the Graphics2D object.

 

OLD FUNCTIONALITY

 

Note that the functionality that worked on the Graphics object still works on the Graphics2D object as it has inherited it.  So you can still do everything that you did in the last lesson here.

 

POINTS (Point2D.Double)

 

In graphics with a lot of lines, it is often useful to first create points and then use those points to create lines.  To do this, we use the Point2D class or the Point2D.Double class.  The later simply allows you to specify coordinates that are double values instead of integers.  This is useful when doing math in computer graphics.

 

CONSTRUCTORS

 

            Point2D.Double (double x, double y)

 

EXAMPLE

 

Create a Point2D.Double object named p1 with (4.4, 8.1) as coordinates.

 

            Point2D.Double p1 = new Point2D.Double(4.4, 8.1);

 

SHAPES

 

There are many classes that extend the Shapes class.  Remember that any object from such a subclass is a Shape. 

 

Line2D.Double

 

The Line2D class extends the Shape object.  Any such object can therefore be drawn on the Graphics2D object.

 

We will use the class Line2D.Double instead.  It is the same as above but allows for double values for coordinates.  This turns out to be useful when doing mathematics for graphics.

 

CONSTRUCTORS

 

      Line2D.Double(double x1, double y1, double x2, double y2)

      Line2D.Double(Point2D p1, Point2D p2)

 

EXAMPLE

 

Create a line from (0,0) to (100, 100) and draw it.

 

Line2D.Double diagonal = new Line2D.Double(0, 0, 100, 100);

g2D.draw(diagonal);

 

Ellipse2D.Double

 

The Ellipse2D.Double allows us to create ellipses and circles.  You simply need to specify the point of the bounding box’s top left corner as well as the width and height of the ellipse.

 

CONSTRUCTORS

 

            Ellipse2D.Double(double x, double y, double w, double h)

 

EXAMPLE

 

Create a circle with the top left corner (of bounding box) at (50,50) and a radius of 75. Fill the ellipse.

 

            Ellipse2D.Double circle = new Ellipse2D.Double(50, 50, 75, 75);

      g2D.fill(circle);

 

Rectangle2D.Double

 

This class allows you to create rectangles by specifying the upper left corner and the width and height of the rectangle.

 

CONSTRUCTOR

 

            Rectangle2D.Double(double x, double y, double w, double h)

 

EXAMPLE

 

Create a rectangle with top left corner (150, 90) and a width of 55 and a height of 82. Draw it.

 

            Rectangle2D.Double r = new Rectangle2D.Double(150, 90, 55, 82);

      g2D.draw(r);


 

RoundRectangle2D.Double

 

This class allows you to create rectangles with rounded corners.  You need to specify the same information as the regular rectangle as well as specify the x and y rounding amounts.

 

CONSTRUCTOR

 

            RoundRectangle2D.Double(double x, double y, double w, double h, double arcw, double arch)

 

EXAMPLE

 

Create a rounded rectangle with top left (bounding box) corner (45, 65), a width of 55 and a height of 80.  The width’s arc should be 10 and the height’s arc should be 10.  Fill the rectangle.

 

            RoundRectangle2D.Double rr = RoundRectangle2D.Double(45, 65, 55, 80, 10, 10);

      g2D.fill(rr);

           

OTHER SHAPES

 

You might want to check out the following shapes that you can also work with:

 

            Arc2D.Double

            CubicCurve2D.Double

            Path2D.Double

            QuadCurve2D.Double

 

FULL CODE EXAMPLE

 

Consider the following code:

 

//Filename: Java2DPanelTester.java

import javax.swing.JFrame;

 

public class Java2DPanelTester

{

          public static void main(String[] args)

          {

                 JFrame jf = new JFrame();               

                 jf.setSize(600,400);

                 jf.setVisible(true);

                 jf.setTitle("Java2D Shapes");  

 

                 //Create my panel and add it to JFrame object

                 Java2DPanel pan = new Java2DPanel();

                 jf.add(pan);

          }

}

//Filename: Java2DPanel.java

import java.awt.Color;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.geom.*;

import javax.swing.JPanel;

 

public class Java2DPanel extends JPanel

{

   public void paint(Graphics g)

   {

       //Create the Graphics2D Object

       Graphics2D g2D = (Graphics2D)g;

         

       //Create a line object and draw it.

       Line2D.Double l1 = new Line2D.Double(0,0,200,200);

       g2D.draw(l1);

         

       //Create a rectangle object and fill it.

       Rectangle2D.Double r1 = new Rectangle2D.Double(200,220,50,75);

       g2D.fill(r1);

         

       //Change the drawing colour to pink.

       Color c1 = Color.pink;

       g2D.setColor(c1);

         

       //Create an ellipse object and draw it.

       Ellipse2D.Double e1 = new Ellipse2D.Double(15,200,100,65);

       g2D.draw(e1);

         

       //Create a round rectangle object and fill it.

       RoundRectangle2D.Double rr1 = new RoundRectangle2D.Double(400,100,100,150,20,20);

       g2D.fill(rr1);

   }

}

  

It will create the following shapes:

 

 

Path2D.Double

 

We can also use the Path2D class to create specific shapes.  All we do is specify the points and whether we should make a straight line (lineTo) or a curved line (curveTo) from point to point.

 

If we want to fill this object, we can also close it off (closePath) in order to connect our last point to our first point.

 

See the code below:

 

//Filename: Path2DPanelTester.java

import javax.swing.JFrame;

 

public class Path2DPanelTester

{

   public static void main(String[] args)

   {

          JFrame jf = new JFrame();               

          jf.setSize(400,220);

          jf.setVisible(true);

          jf.setTitle("Path2D Objects");  

 

          //Create my panel and add it to JFrame object

          Path2DPanel pan = new Path2DPanel();

          jf.add(pan);

   }

}

//Filename: Path2DPanel.java

import java.awt.Color;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.geom.*;

import javax.swing.JPanel;

 

public class Path2DPanel extends JPanel

{

   public void paint(Graphics g)

   {

         Graphics2D g2D = (Graphics2D)g;

        

         //Create a Path2D object.

         Path2D.Double p1 = new Path2D.Double();

         p1.moveTo(10, 10);

         p1.lineTo(20, 110);

         p1.lineTo(40, 160);

         p1.lineTo(55, 95);

         p1.lineTo(80, 100);

         p1.lineTo(120, 55);

         p1.lineTo(170, 40);

         p1.lineTo(100, 5);

         p1.closePath();

        

         //Fill the Path2D object on the screen.

         g2D.fill(p1);

        

         //Change the drawing color to red.

         g2D.setColor(Color.RED);

        

         //Create a different Path2D object with curves. 

         Path2D.Double p2 = new Path2D.Double();

         p2.moveTo(350, 10);

         p2.lineTo(180, 40);

         p2.lineTo(210, 155);

         p2.curveTo(240, 220, 340, 20, 380, 50);

         p2.closePath();

        

         //Fill the Path3D object on the screen.

         g2D.fill(p2);

   }

}

 

The program above will create: