Upload
ibraheemalex
View
220
Download
0
Embed Size (px)
Citation preview
8/9/2019 Day7 - Graphics
1/32
Day 7: Graphics & Even Driven Programs
By: Mahmoud El-Khateeb
8/9/2019 Day7 - Graphics
2/32
The acm.graphics Model
Newer objects can obscure those added earlier.
Layering is called the stacking order (or z-order).
8/9/2019 Day7 - Graphics
3/32
Structure of the acm.graphics Package
GCanvas GPoint GDimension GRectangle
GObjectGCompound
GMath
GLabel GRect GOval GLine GArc GImage GPolygon
GRoundRect G3DRect
Interfaces:GFillableGResizableGScalableGContainer
GLabel GRect GOval GLine GArc GImage GPolygon
GCompound
GCanvas
8/9/2019 Day7 - Graphics
4/32
GCanvas
Used to represent background canvas of collage.
GraphicsProgramautomatically creates GCanvasthat fills the entire program window.
When you call add(..) in GraphicsProgramits
forwarding your call to the Gcanvas
8/9/2019 Day7 - Graphics
5/32
Methods in the GCanvas Class
The following methods are available in both the GCanvas andGraphicsProgramclasses:
Adds the object to the canvas at the front of the stack
Moves the object to (x,y) and then adds it to the canvas
Removes the object from the canvas
Removes all objects from the canvas
Returns the frontmost object at (x,y), ornull if none
Returns the width in pixels of the entire canvas
Returns the height in pixels of the entire canvas
Sets the background color of the canvas to c.
add(object)
add(object, x, y)
remove(object)
removeAll()
getElementAt(x, y)
getWidth()
getHeight()
setBackground(c)
Pauses the program for the specified time in milliseconds
Suspends the program until the user clicks the mouse
pause(milliseconds)
waitForClick()
The following methods are available inGraphicsProgramonly:
8/9/2019 Day7 - Graphics
6/32
class hierarchy ofGObject
GObjectGCompound
GLabel GRect GOval GLine GArc GImage GPolygon
GRoundRect G3DRect
8/9/2019 Day7 - Graphics
7/32
setLocation(x,y) Resets the location of the object to the specified point
move(dx,dy) Moves the object dx and dypixels from its current position
getX()
getY()
Returns the x coordinate of the object
Returns the y coordinate of the object
getWidth()
getHeight()
Returns the horizontal width of the object in pixels
Returns the vertical height of the object in pixels
contains(x,y) Returns true if the object contains the specified point
setColor(c)
getColor()
Sets the color of the object to the Color c
Returns the color currently assigned to the object
setVisible(flag)
isVisible()
Sets the visibility flag (false=invisible,true=visible)
Returns true if the object is visible
sendToFront()
sendToBack()
sendForward()
sendBackward()
Sends the object to the front of the stacking order
Sends the object to the back of the stacking order
Sends the object forward one position in the stacking order
Sends the object backward one position in the stacking order
Methods Common to All GObjects
8/9/2019 Day7 - Graphics
8/32
Methods Defined by Interfaces
setFilled(flag)
isFilled()
setFillColor(c)
getFillColor()
Sets the fill state for the object (false=outlined,true=filled)
Returns the fill state for the object
Sets the color used to fill the interior of the object to c
Returns the fill color
GFillable (GArc,GOval,GPolygon,GRect)
setSize(width,height)
setBounds(x,y,width,height)
Sets the dimensions of the object as specified
Sets the location and dimensions together
GResizable (GImage,GOval,GRect)
scale(sf)
scale(sx,sy)
Scales both dimensions of the object bysf
Scales the object bysx horizontally andsy vertically
GScalable (GArc,GCompound,GLine,GImage,GOval,GPolygon,GRect)
Why Interfaces ?
8/9/2019 Day7 - Graphics
9/32
A little Animation demo:BouncingBall.java
8/9/2019 Day7 - Graphics
10/32
QuickBrownFox
The quick brown fox jumps
over the lazy dog.baseline
origin
height
ascent
descent
The Geometry of the GLabel Class
The GLabel class relies on a set of geometrical concepts that arederived from classical typesetting:
baseline : imaginary line on which the characters rest.
origin : point on the baseline at which the label begins.
height (of font ) : distance between successive baselines.
ascent : distance characters rise above the baseline. descent : distance characters drop below the baseline.
8/9/2019 Day7 - Graphics
11/32
The GArc Class
The GArc class represents an arc formed by taking a section from the perimeterof an oval.
Conceptually, the steps necessary to define an arc are:
Specify the coordinates and size of the bounding rectangle.
Specify the start angle, which is the angle at which the arc begins.
Specify the sweep angle, which indicates how far the arc extends.
Angles are measured in degrees startingat the +x axis (the 3:00 oclock position)and increasing counterclockwise.
Negative values for the start and sweepangles signify a clockwise direction.
8/9/2019 Day7 - Graphics
12/32
xercise: GArc Geometry
GArcExamples
Assume : cx and cy are coordinates of the center of the windowd(diameter) is 0.8 times the screen height.
GArc a1 = new GArc(d, d, 0, 90);add(a1, cx - d / 2, cy - d / 2);
GArc a2 = new GArc(d, d, 45, 270);add(a2, cx - d / 2, cy - d / 2);
GArcExamples
GArcExamples
GArc a3 = new GArc(d, d, -90, 45);add(a3, cx - d / 2, cy - d / 2);
GArcExamples
GArc a4 = new GArc(d, d, 0, -180);add(a4, cx - d / 2, cy - d / 2);
8/9/2019 Day7 - Graphics
13/32
Filled Arcs
The GArc class implements the GFillable interface, which means that youcan callsetFilledon a GArc object.
A filled GArc is displayed as the pie-shaped wedge formed by the centerand the endpoints of the arc, as illustrated below:
public void run() {
GArc arc = new GArc(0, 0, getWidth(), getHeight(),
0, 90);
arc.setFilled(true);
add(arc);
}
FilledEllipticalArc
8/9/2019 Day7 - Graphics
14/32
Structure of the acm.graphics Package
GObject
GLabel GRect GOval GLine GArc GImage GPolygon
GCompound
8/9/2019 Day7 - Graphics
15/32
The GImage Class
The GImage class is used to display an image from a file.
new GImage(image file,x,y)
Looks for the file in the current project directory and then in a
subdirectory named images.
GIF (.gif ) and JPEG (.jpg or.jpeg ) supported.
im
age fil
e : name of a file containing image.x and y are the coordinates of the upper left corner of the image.
8/9/2019 Day7 - Graphics
16/32
Example of the GImage Class
public void run(){GImage background = new GImage("BibAlex.jpg");
add(background ,0,0);
}
8/9/2019 Day7 - Graphics
17/32
Resizing GImage
public void run(){
GImage background = new GImage("BibAlex.jpg");
background.scale(1.5, .5);
add(background ,0,0);
}
8/9/2019 Day7 - Graphics
18/32
The GPolygon Class
GPolygon : represent graphical objects bound by linesegments.
diamond regular hexagon
A Gpolygon has a reference point that is convenient for that
particular shape.
The most convenient reference point is often the geometriccenter of the object.
8/9/2019 Day7 - Graphics
19/32
Constructing a GPolygon Object
The GPolygon constructor creates an empty polygon.
Add vertecies one at a time using addVertex(x, y)
- x andy relative to reference point of polygon
After setting initial vertex using addVertex(x, y), can addthe remaining ones using:
addVertex(x, y)adds a new vertex relative to thereference point
addEdge(dx, dy) adds a new vertex relative to thepreceding one
Polygon closed for you
Automatically attaches first and last vertices.
8/9/2019 Day7 - Graphics
20/32
Drawing a Diamond (addVertex)
skip simulation
public void run() {GPolygon diamond = createDiamond(100, 75);diamond.setFilled(true);
diamond.setFillColor(Color.MAGENTA);add(diamond, getWidth() / 2, getHeight() / 2);
}
diamond
Draw
Diamond
The following program draws a diamond usingaddVertex:
private GPolygon createDiamond(double width, double height) {GPolygon diamond = new GPolygon();
diamond.addVertex(-width / 2, 0);
diamond.addVertex(0, -height / 2);diamond.addVertex(width / 2, 0);
diamond.addVertex(0, height / 2);return diamond;
}
diamond
public void run() {GPolygon diamond = createDiamond(100, 75);diamond.setFilled(true);
diamond.setFillColor(Color.MAGENTA);add(diamond, getWidth() / 2, getHeight() / 2);
}
private GPolygon createDiamond(double width, double height) {GPolygon diamond = new GPolygon();
diamond.addVertex(-width / 2, 0);
diamond.addVertex(0, -height / 2);diamond.addVertex(width / 2, 0);
diamond.addVertex(0, height / 2);return diamond;
}
diamond
8/9/2019 Day7 - Graphics
21/32
Drawing a Diamond (addEdge)
skip simulation
public void run() {GPolygon diamond = createDiamond(100, 75);diamond.setFilled(true);
diamond.setFillColor(Color.MAGENTA);add(diamond, getWidth() / 2, getHeight() / 2);
}
diamond
Draw
Diamond
This program draws the same diamond usingaddEdge:
private GPolygon createDiamond(double width, double height) {GPolygon diamond = new GPolygon();
diamond.addVertex(-width / 2, 0);
diamond.addEdge(width / 2, -height / 2);diamond.addEdge(width / 2, height / 2);
diamond.addEdge(-width / 2, height / 2);diamond.addEdge(-width / 2, -height / 2);return diamond;
}
diamond
public void run() {GPolygon diamond = createDiamond(100, 75);diamond.setFilled(true);
diamond.setFillColor(Color.MAGENTA);add(diamond, getWidth() / 2, getHeight() / 2);
}
private GPolygon createDiamond(double width, double height) {GPolygon diamond = new GPolygon();
diamond.addVertex(-width / 2, 0);
diamond.addEdge(width / 2, -height / 2);diamond.addEdge(width / 2, height / 2);
diamond.addEdge(-width / 2, height / 2);diamond.addEdge(-width / 2, -height / 2);return diamond;
}
diamond
8/9/2019 Day7 - Graphics
22/32
The GCompoundclass
The GCompoundallows for combining several graphicalobjects so they behaves like one GObject.
Add objects to GCompound( like it was a GCanvas )
You can treat Gcompoundas one object.
Similare to GPolygon , GCompoundhas a reference pointthat all objects added respond to
When GCompound is added to canvas, its placedrelative to its referece point.
8/9/2019 Day7 - Graphics
23/32
Lets draw a face :)
8/9/2019 Day7 - Graphics
24/32
.
8/9/2019 Day7 - Graphics
25/32
Breaaaaaak :)
8/9/2019 Day7 - Graphics
26/32
Event-driven Program
When users interact with computer they generate
events (e.g. moving/clicking the mouse. typing. etc)
Can respond to events by having listeners for events.
addMouseListeners() addKeyListeners()
import java.awt.event.*;
Use Java library that deals with events
Because events are not controlled by the program, they
are said to be asynchronous
8/9/2019 Day7 - Graphics
27/32
ClickForFace Example
8/9/2019 Day7 - Graphics
28/32
Responding to Mouse Events
mouseClicked(e)
mousePressed(e)
mouseReleased(e)
mouseMoved(e)mouseDragged(e)
Called when the user clicks the mouse
Called when the mouse button is pressed
Called when the mouse button is released
Called when the user moves the mouseCalled when the mouse is dragged with the button down
The parameter e is aMouseEvent object, which providesmore data about the event, such as the location of the mouse.
1. init orrun method should call addMouseListeners
2. Write definitions of any listener methods you need.
General steps:
8/9/2019 Day7 - Graphics
29/32
MouseTracker Example
8/9/2019 Day7 - Graphics
30/32
Responding to Keyboard Events
The most common key events are:
keyPressed(e)
keyReleased(e)
keyTyped(e)
Called when the user presses a key
Called when the key comes back up
Called when the user types (presses and releases) a key
In these methods, e is a KeyEvent object, which indicateswhich key is involved
1. init orrun method should call addKeyListeners
2. Write definitions of any listener methods you need.
General steps:
8/9/2019 Day7 - Graphics
31/32
DragObjects Example
8/9/2019 Day7 - Graphics
32/32
UfoGame Example