Title: Drawing Basics
Course: CPS 261: Advanced Java Concepts ~ DL & MM MASTER

Drawing Basics

In this set of notes, we will be focussing on simple drawing techniques using the paint method.

1. Create a basic JFrame class, and we will take a look at the normal things we call in the constructor:
setSize, setVisible, setDefaultCloseOperation
2. Note that JFrame has a default constructor, but it also has a constructor that takes a title.
super("Simple Example");
3. Go look up JFrame in the documentation to see the heirarchy of classes. Note that at the top level there is an abstract class called Component. Virtually everything you ever do in GUI is derived from Component.
4. The Window class is in the JFrame's heirarchy. Note that in the Window class, there is a method called paint.
5. Overriding the paint method allows you to completely redraw your screen. Normally, paint is called everytime that the Java Runtime System needs to redraw the whole screen. We will look at this issue in more detail later.
6. When drawing on your screen, you need to be aware of the coordinate system. Drawing commands often require specification of some x, and y location on the screen. Let's suppose that the JApplet or the JFrame is given a region that is 500 pixels wide and 200 pixels high to work with. In this case:
  - x=0, y= 0 specifies the upper left corner of the drawable area
  - x=499, y = 0 specifies the upper right corner of the drawable area
  - x=0, y = 199 specifies the lower left corner of the drawable area
  - x=499, y=199 specifies the lower right corner of the drawable area
7. Most drawing happens by making calls to methods on the Graphics class. An instance of the Graphics class is passed into the paint method.
8. Java draws with a single color until a call to setColor is made to switch the color to another color. The set Color takes in an instance of the Color class. The Color class shows up in the java.awt package and has some interesting methods and constructors. It is worthwhile to take a look at the online help for the Color class.
  - One way to get a color class is to use some of the Statically defined constant colors such as (See the java.awt.Color help pages for all of the legal values):
Color.red, Color.yellow, Color.black, etc.
  - Another way is to think in terms of mixing colors with Red, Green, Blue (RGB mode). There is a constructor that allows you to mix colors by passing numbers that are between 0 and 255:
//mix in some whiteness
Color myLightRed = new Color(255, 150, 150);
  - Another Constructor that can sometimes be useful
Color myColor = new Color(float, float, float);
I will use this to create a random color:
Color myRandom = new Color((float)Math.random(),
(float)Math.random(), (float)Math.random());
  - One last useful constructor:
Color myColor = new Color(int);
This can be handy after converting a hex color input (FF8080) into an integer. For example, consider the code:
int colorValue = Integer.parseInt("FF8080", 16);
Color c = new Color(colorValue);
9. The Graphics(java.awt.Graphics) class has a lot of methods. We will use a few of them. We will only cover a few of the fundamental methods. See the Graphics class for the many others.
10. Methods that start with draw create hollow objects, while methods that start with fill create solid objects. Also the first 4 parameters on these methods are often:
  - starting x
  - starting y
  - width
  - height

Some examples:
drawRect(10,35, 400, 150); // (x,y, w, h)
drawOval (10,35, 400, 150);
fillRect(10,35, 400, 150);
fillOval(10,35, 400, 150);
11. drawLine draws a line between points (x1,y1) and (x2,y2)
drawLine(x1,y1, x2, y2);
12. drawString draws a Text string that starts at location x, y:
drawString("Some Name", 10, 150);

Simple.java

import java.awt.Color;
import java.awt.Graphics;

import javax.swing.JFrame;

public class Simple extends JFrame {

    Simple(String name)
    {
        super(name);
        setSize(600,400);
        setVisible(true);
        setDefaultCloseOperation(EXIT_ON_CLOSE);

    }
    public void paint(Graphics g) {
        super.paint(g);
        g.drawRect(10,35, 400, 150);

        g.setColor(Color.red);
        g.fillOval(110,35, 200, 100);

        g.setColor(Color.green);
        g.fillRect(160, 60,  100, 50);
        g.drawLine(10, 180, 400, 180);

        g.setColor(Color.blue);
        g.drawString("Clem's Artwork", 10, 175);
    }
    public static void main(String[] args)
    {
        Simple simple = new Simple("Simple Drawing");
    }
}



Other methods to consider:

1. drawRoundRect, fillRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight);
g.drawRoundRect(110, 55, 200, 100, 45, 15);
g.fillRoundRect(110, 255, 200, 100, 15, 45);
2. draw3DRect(int x, int y, int width, int height, boolean raised)
g.draw3DRect(110, 55, 200, 100, false);
g.draw3DRect(350, 55, 200, 100, true);
g.fill3DRect(110, 200, 200, 100, false);
g.fill3DRect(350, 200, 200, 100, true);
3. 3D Rectangle with some thickness:


  void button(Graphics g, int x, int y, int w, int h, int thickness, boolean raised)
    {
        for (int i=0; i < thickness; i++)
        {
            g.fill3DRect(x+i, y+i, w-2*i, h-2*i, raised);
        }
    }
    public void paint(Graphics g) {
        super.paint(g);

        g.setColor(Color.red);
        button(g,110, 55, 200, 100, 10, true);
        button(g,110, 200, 200, 100, 10, false);
    }


4. drawArc, fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)

        g.setColor(Color.red);
        g.drawArc(100, 100, 180, 180, 20, 60);
        g.fillArc(300, 100, 180, 180, 20, 60);

        g.setColor(Color.blue);
        g.drawRect(100, 100, 180, 180);
        g.drawRect(300, 100, 180, 180);


5. drawPolygon, fillPolygon(int[ ] xCoord, int[ ] yCoord, int numPoints);
6. Polygon p = new Polygon(int[ ]xCoord, int[ ] yCoord, int numPoints);
drawPolygon, fillPolygon( Polygon p);



       int[] x={100, 200, 300};
       int[] y={50, 150, 90};
       int[] x2={100, 200, 300, 250, 150};
       int[] y2={300, 200, 300, 380, 380};

       Polygon p = new Polygon(x, y, x.length);
       Polygon p2 = new Polygon(x2, y2, x2.length);
       g.drawPolygon(p);
       g.fillPolygon(p2);


7. Note that Polygon has many useful methods like contains, getBounds - Note that at some point you might want to know about the convenience class Rectangle, and Point
8. Font font = new Font(Font.SERIF, Font.BOLD, 36); //Font.SANS_SERIF, Font.MONOSPACED are always available
Alternatively:
Font font = new Font("Serif", Font.BOLD, 36); // "SansSerif" , and "Monospaced" are always available
g.setFont(font);


        Font font = new Font(Font.SERIF, Font.BOLD, 16);
        g.setFont(font);
        g.drawString("SERIF", 30, 80);

        font = new Font("SansSerif", Font.BOLD, 16);
        g.setFont(font);
        g.drawString("SansSerif", 30,130);

        font = new Font(Font.MONOSPACED, Font.BOLD, 16);
        g.setFont(font);
        g.drawString("MONOSPACED", 30,180);

        font = new Font("Poor Richard", Font.BOLD, 16);
        g.setFont(font);
        g.drawString("Poor Richard", 30,230);


9. Finding all of the Fonts on your local machine:


import java.awt.Font;
import java.awt.GraphicsEnvironment;


public class FontsSupported {

    public static void main(String[] args) {
        Font[] fonts = GraphicsEnvironment.getLocalGraphicsEnvironment()
                .getAllFonts();
        for ( int i = 0; i < fonts.length; ++i ) {
            System.out.print( fonts[i].getFontName() + " : " );
            System.out.print( fonts[i].getFamily() + " : " );
            System.out.println( fonts[i].getName() );
        }
        System.out.println( "\n\n\tAvailable Fonts:\n" );
        String[] names = GraphicsEnvironment.getLocalGraphicsEnvironment()
                .getAvailableFontFamilyNames();
        for ( int i = 0; i < names.length; ++i )
            System.out.println( names[i] );
    }

}



Last Updated: September 6, 2013 2:04 AM