Graphics
Download
1 / 24

Graphical Applications - PowerPoint PPT Presentation


  • 293 Views
  • Uploaded on

Graphics Dr. Tim Margush University of Akron Goals Understand basic Graphics concepts To use basic graphics objects (shapes, colors, and text) in a GUI Application setting Explore the use of coordinate transformations Obtain user input in a graphical application via a dialog box Frames

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Graphical Applications' - adamdaniel


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Graphics l.jpg

Graphics

Dr. Tim Margush

University of Akron


Goals l.jpg
Goals

  • Understand basic Graphics concepts

  • To use basic graphics objects (shapes, colors, and text) in a GUI Application setting

  • Explore the use of coordinate transformations

  • Obtain user input in a graphical application via a dialog box


Frames l.jpg
Frames

  • A Frame is the container for an application's GUI

    • GUI = Graphical User Interface

  • Frame is a class in java.awt providing a title bar and a border

  • JFrame is a class in javax.swing extending Frame adding support for JFC/Swing components


Instantiating jframes l.jpg

A Frame (JFrame) has properties for its

title (passed via constructor or setTitle method)

size (width and height)

location (default location used, setLocation(x,y)

behavior (usually exits application when closed)

visibility (starts hidden)

JFrame jf = new JFrame("Sample Frame Title");

jf.setSize(200, 300);

jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

jf.setVisible(true);

Instantiating JFrames


Adding content to jframes l.jpg
Adding Content to JFrames

  • Graphical content is displayed in the JFrame's content pane

    • jf.add(someComponent);

      • Before Java 1.5, use: jf.getContentPane().add(someComponent);

    • getContentPane() returns a Container object

    • add(someComponent) adds a Component object to the Container.


Graphical hierarchy l.jpg
Graphical Hierarchy

Component

A small subset of the hierarchy tree

Button

CheckBox

Container

JComponent

Panel

JPanel

JScrollPane

JOptionPane

Applet

JApplet


Drawing on components l.jpg
Drawing on Components

  • Use a JComponent for a basic graphics canvas

    • Graphics commands are executed from the paintComponent method

      • paintComponent is called by the graphics system when it appears the canvas needs to be refreshed

    • public void paintComponent(Graphics g);

      • java.awt.Graphics


Java awt graphics l.jpg
java.awt.Graphics

  • The Graphics object represents the canvas where drawing can occur

  • Methods include

    • drawArc, drawOval, fillRect, drawPolygon

    • fillArc, fillOval, fillRect, fillPolygon

    • drawImage, drawLine

    • setColor

    • setFont, drawString


Java awt graphics2d l.jpg
java.awt.Graphics2D

  • A subclass of Graphics adding new and improved methods

    • public void paintComponent(Graphics g){

    • //g is actually a Graphics2D object when

    • // supplied by a swing component

    • Graphics2D g2 = (Graphics2D) g; //cast

  • Graphics2D objects have methods:

    • draw, drawString, fill, draw3DRect, setPaint, setStroke, setBackground, …


Coordinate system l.jpg

Coordinate system

Top left is (0,0)

X increases to the right

Y increases downward

(over, down)

Methods exist to alter the transform used to specify coordinates and to draw text, shapes, and images

Y = 100 units

X = 300 units

(300,100)

Coordinate System

(0,0)

Increasing X coords

72 dpi

Increasing Y coords

Click to view animation steps

Animation Complete


Customizing a jcomponent l.jpg

public class NameComponent extends JComponent{

public void paintComponent(Graphics g){

Graphics2D g2 = (Graphics2D) g;

//Add you custom drawing commands here

g2.setFont(new Font("SansSerif", Font.ITALIC, 24));

g2.drawString("Java Jerry", 20, 40);

}

}

jf.add(new NameComponent());

jf.setVisible(true);

Customizing a JComponent


Drawing shapes l.jpg
Drawing Shapes

public class NameComponent extends JComponent{

public void paintComponent(Graphics g){

Graphics2D g2 = (Graphics2D) g;

//Add you custom drawing commands here

g2.setColor(Color.RED);

g2.fill(new Rectangle(20, 50, 100, 30));

g2.setColor(Color.BLUE);

g2.draw(new Rectangle(10, 75, 25, 100));

}

}


Applet l.jpg
Applet

  • Java program that executes inside a client window (browser)

    • Has a Graphical Interface

    • Is limited in power by local security settings

  • Applets are embedded in HTML documents

    • Browser loads page

    • Applet tag in page causes browser to load and run the applet

<applet code="MyApplet.class" width="200" height="100"></applet>


Building a japplet l.jpg
Building a JApplet

  • Define a class that extends JApplet

    • Inherit all of the properties and methods of the JApplet class (java.applet.Applet and javax.swing.JApplet)

    • Defines interface between browser and your program

  • Customize the inherited behavior

    • Add a Graphics container for your custom use

    • Override key methods

    • Add appropriate properties


A simple applet l.jpg
A Simple Applet

public class MyApplet extends javax.swing.JApplet{

public void init(){

add(new NameComponent());

}

}

  • The init method (not the constructor) is used to setup the JApplet contents

  • Add a component with your custom drawing commands (via its paintComponent method)

    • Swing JApplets do not use the paint method found in older style awtApplets


Text related objects and methods l.jpg

Create an awt.Font object to control the text appearance

Font(String fontName, int style, int size);

Use Graphics.setFont to establish font settings

void setFont(awt.Font);

Use Graphics.setColor to specify drawing color

void setColor(awt.Color);

Use Graphics2D.drawString to display text

void drawString(String str, int x, int y);

(x, y) is location of left edge of first characters baseline

Text Related Objects and Methods


Text rendering example l.jpg
Text Rendering Example

  • Font f1= new Font("Courier", Font.BOLD, 32);

  • g2.setFont(f1);

  • g2.drawString("Red Rover", 0, 32);

  • g2.setColor(Color.RED);

  • g2.setFont(new Font("Serif", Font.ITALIC, 20));

  • g2.drawString("Font with Serifs", 50, 100);

(0,32)

(50,100)


Shapes l.jpg

(20, 60)

h = 100 units

w = 300 units

Shapes

  • Use java.awt.geom classes to create basic shapes

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

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

    • Point2D.Double(double x, double y)

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

    • Line2D.Double(Point2D a, Point2D b)

  • Use the Graphics2D setStroke method and BasicStroke object to control line weight

    • g2.setStroke(new BasicStroke(3.F));

  • Draw the shape

    • g2.draw(new Ellipse2D.Double(20, 60, 300, 100));


Creating shape classes l.jpg
Creating Shape Classes

  • Use a bounding box approach

    • Constructor specifies x, y, and perhaps a scaling factor

    • public someshape(int x, int y, double scale);

  • Provide a draw method that accepts a Graphic2D object as the canvas to draw on

    • public void draw(Graphics2D g2){//details

  • Use drawing capabilities to draw shape on g2

    • g2.translate(x,y); //translate origin to (x,y)

    • g2.draw(new Rectangle2D.Double(…

    • g2.translate(-x, -y); //restore original coords


Sample shape class l.jpg

Bird b1 = new Bird(100, 100, 10);

Bird b2 = new Bird(100, 100, 20);

b1.draw(g2);

g2.setColor(Color.red);

b2.draw(g2);

Sample Shape Class

public Bird(double x, double y, double scale){

left=x; top = y; sf = scale; //instance variables

}

public void draw(Graphics 2D g2){

Stroke save_stroke=g2.getStroke();

Color save_color=g2.getColor();

g2.translate(left, top);

g2.setStroke(new BasicStroke(1f);

g2.draw(new Ellipse2D.Double(1*sf, 0*sf, 2*sf, 2*sf));

g2.draw(new Ellipse2D.Double(2*sf, 1*sf, 5*sf, 3*sf));

g2.setStroke(new BasicStroke(6f);

Etc.

g2.setStroke(save_stroke); //restore original settings

g2.setColor(save_color);

g2.translate(-left,-top);

}

Click to view animation steps

Animation Complete


Text input l.jpg
Text Input

  • There are two basic methods of accepting text input in a graphical application

    • Provide an input widget in the app's GUI

      • This is a bit more advanced

    • Pop up a dialog to accept user input

      • JOptionPane makes this quite easy!

String response = javax.swing.JOptionPane.showInputDialog("Prompt");

Click to view animation steps

Animation Complete


Joptionpane showinputdialog l.jpg
jOptionPane.showInputDialog

  • showInputDialog is a static method

    • It requires at least one argument, the prompt for information

    • A second (optional) argument specifies a default or initial value for the response

  • The dialog is modal (blocking)

    • Returns null if Cancel button clicked

  • Do not call from the paintComponent method

    • Call from the JComponent's constructor (if in an application) and store responses in instance variables

    • Using this in a JApplet really requires some more advanced knowledge about threads, however, for experimenting, the above technique will still work


Summary l.jpg
Summary

  • A JFrame is the basic container for GUI applications

  • A browser or other client is the container for a JApplet

  • Applets are classes that extend the swing class, JApplet

  • JApplet and JFrame objects have a content pane

    • Use the add method to place a component in the container's content pane

  • JComponents provide a graphics environment that can be embedded in a JFrame or JApplet


Summary 2 l.jpg
Summary (2)

  • The Graphics2D class provides an object-oriented approach to drawing shapes via the draw method

  • The drawString method allows text to be displayed as a graphic element

  • Colors and Fonts are controlled using Graphics methods

    • setColor, setFont (Font and Color objects are also used)

  • The JOptionPane class provides a simple way to input text in a GUI context

    • Use the static showInputDialog method


ad