Graphics notes 1

Draw geometric shapes

You must read

PictureFrame.java

Download the program here .

   1:import java.awt.*;
   2:import javax.swing.*;
   3:
   4:public class PictureFrame extends JFrame {
   5:    public void paint(Graphics g) {
   6:        setBackground(Color.white); // set the background of the frame
   7:        int x = 20;
   8:        int y = 50;
   9:        int w = 200; // width
  10:        int h = 100; // height
  11:        g.setColor(Color.black); // set the color to black;
  12:        g.drawRect(x, y, w, h);
  13:        g.setColor(Color.green);
  14:        g.fillOval(x, y, w, h);
  15:        g.setColor(Color.blue);
  16:        g.drawLine(x, y, x+w, y+h);
  17:        g.drawLine(x+w, y, x, y+h);
  18:    }
  19:    
  20:    public static void main(String[] args) {
  21:        PictureFrame f = new PictureFrame();
  22:        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  23:        f.setSize(300,200);
  24:        f.setVisible(true);
  25:    }
  26:}
  27:        
  28:

The program PictureFrame illustrates the basic idea about drawing pictures.

paint

We override the paint(Graphics g). The paint method describes how you want to paint your component.

setBackground

setBackground(Color color) sets the background color of the componenet.

Graphics

The Graphics object passed into the paint method provides both a context for painting and methods for performing the painting. The methods, which we discuss in detail a little later, have names such as drawImage, drawString, drawRect, and fillRect.
The full name of Graphics is java.awt.Graphics.

How to draw?

choose a color.
We use g.setColor(color) to set the color.
choose what you want to draw : rectangle, oval, straight line, or string...

Color

The full name of Color is java.awt.Color . Color class represents color in real life. A color consists of 3 components :red, green and blue

Constructors

few useful constructors are

Color(int r, int g, int b) 

Color(float r, float g, float b)

r,g,b represent red, green and blue components.

Colors

There is a faster way to use color. We have some final static Color variables predefined. To access them, use

 Color.black, Color.blue, Color.cyan, Color.darkGray, Color.gray,
Color.green, Color.lightGray, Color.magenta, Color.orange, Color.pink, 
Color.red, Color.white, Color.yellow

Assign color

Assign color by g.setColor(Color color). And the color has effect on the next drawing object.

Painting shapes

The Graphics class defines methods for painting the following kinds of shapes:

Lines (drawLine)
Rectangles (drawRect and fillRect)
Raised or lowered rectangles (draw3DRect and fill3DRect)
Round-edged rectangles (drawRoundRect and fillRoundRect)
Ovals (drawOval and fillOval)
Arcs (drawArc and fillArc)
Polygons (drawPolygon, drawPolyline, and fillPolygon)

In order to understand the methods, we need to understand the coordinate system.
coord

drawLine

drawLine(int x1, int y1, int x2, int y2): Draws a line, using the current color, between the points (x1, y1) and (x2, y2) in this graphics context's coordinate system.

drawRect

drawRect(int x, int y, int width, int height) : Draws the outline of the specified rectangle. The left and right edges of the rectangle are at x and x + width. The top and bottom edges are at y and y + height.

fillRect

fillRect(int x, int y, int width, int height) : Fills the specified rectangle. The left and right edges of the rectangle are at x and x + width - 1. The top and bottom edges are at y and y + height - 1. The resulting rectangle covers an area width pixels wide by height pixels tall.

drawOval

drawOval(int x, int y, int width, int height) : Draws the outline of an oval. The result is a circle or ellipse that fits within the rectangle specified by the x, y, width, and height arguments. The oval covers an area that is width + 1 pixels wide and height + 1 pixels tall.

fillOval

fillOval(int x, int y, int width, int height) : Fills an oval bounded by the specified rectangle. The result is a circle or ellipse that fits within the rectangle specified by the x, y, width, and height arguments. The oval covers an area that is width + 1 pixels wide and height + 1 pixels tall.

drawArc

drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) Draws the outline of a circular or elliptical arc covering the specified rectangle.
The resulting arc begins at startAngle and extends for arcAngle degrees, using the current color. Angles are interpreted such that 0 degrees is at the 3 o'clock position. A positive value indicates a counter-clockwise rotation while a negative value indicates a clockwise rotation.
The center of the arc is the center of the rectangle whose origin is (x, y) and whose size is specified by the width and height arguments.

fillArc

fillArc(int x, int y, int width, int height, int startAngle, int arcAngle) Fills a circular or elliptical arc covering the specified rectangle.
The resulting arc begins at startAngle and extends for arcAngle degrees, using the current color. Angles are interpreted such that 0 degrees is at the 3 o'clock position. A positive value indicates a counter-clockwise rotation while a negative value indicates a clockwise rotation.
The center of the arc is the center of the rectangle whose origin is (x, y) and whose size is specified by the width and height arguments.

PictureFrame2.java

Download the program here .

   1:import java.awt.*;
   2:import javax.swing.*;
   3:
   4:public class PictureFrame2 extends JFrame {
   5:    public void paint(Graphics g) {
   6:        setBackground(Color.white); // set the background of the frame
   7:        g.setColor(Color.black); // set the color to black;
   8:        g.drawRect(50, 50, 300, 100);
   9:        g.setColor(Color.green);
  10:        g.drawArc(50,50,300,100, 0, 135);
  11:        g.drawLine(50,50,200,100);
  12:        g.setColor(Color.red);
  13:        g.fillArc(50,50,300,100, 225,90);
  14:    }
  15:    
  16:    public static void main(String[] args) {
  17:        PictureFrame2 f = new PictureFrame2();
  18:        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  19:        f.setSize(400,200);
  20:        f.setVisible(true);
  21:    }
  22:}

Draw String

PictureFrame3.java

Download the program here .

   1:import java.awt.*;
   2:import javax.swing.*;
   3:
   4:public class PictureFrame3 extends JFrame {
   5:    public void paint(Graphics g) {
   6:        setBackground(Color.white); // set the background of the frame
   7:        g.setColor(new Color(10,60,200)); 
   8:        g.setFont(new Font("Dialog", Font.PLAIN, 20));
   9:        g.drawString("PIC20A", 10, 50);
  10:        g.setColor(Color.red);
  11:        g.setFont(new Font("Serif", Font.ITALIC,30));
  12:        g.drawString("PIC20A",10,140);
  13:    }
  14:    
  15:    public static void main(String[] args) {
  16:        PictureFrame3 f = new PictureFrame3();
  17:        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  18:        f.setSize(150,150);
  19:        f.setVisible(true);
  20:    }
  21:}

How to draw?

choose a color.
We use g.setColor(color) to set the color.
choose a font. We use g.setFont(Font font) te set a font
use g.drawString to set the string

Font

The full path of Font is java.awt.Font. It represents fonts.

constructor

Font(String name, int style, int size) Creates a new Font from the specified name, style and point size.

name : the font name. This can be a logical font name or a font face name. A logical name must be either: Dialog, DialogInput, Monospaced, Serif, SansSerif, or Symbol. If name is null, the name of the new Font is set to Default.
style : the style constant for the Font It may be PLAIN, BOLD, ITALIC or BOLD+ITALIC
size: the point size of the Font.

Exampe: Font font = new Font("Dialog", Font.BOLD, 15);

drawString

drawString(String str, int x, int y) Draws the text given by the specified string, using this graphics context's current font and color The baseline of the leftmost character is at position (x, y) in this graphics context's coordinate system.

Lazy way of using new

In our code, we use


g.setFont(new Font("Dialog", Font.PLAIN, 20));

This is equivalent to

Font font = new Font("Dialog", Font.PLAIN, 20);
g.setFont(font);

Since we are not going to refer to the font, it make the code shorter by using the first method. The new create an instance of the object.