graphics
Download
Skip this Video
Download Presentation
Graphics

Loading in 2 Seconds...

play fullscreen
1 / 24

Graphics - 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 'Graphics' - 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

Graphics

Dr. Tim Margush

University of Akron

goals
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
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
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
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
Graphical Hierarchy

Component

A small subset of the hierarchy tree

Button

CheckBox

Container

JComponent

Panel

JPanel

JScrollPane

JOptionPane

Applet

JApplet

drawing on components
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
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
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
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
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
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
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

building a japplet
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
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
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
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
(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
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
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
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
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
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
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