draw shapes
DESCRIPTION
Draw Shapes. Introduction to simple graphics. What is a graphics context?. An instance of the Graphics class Graphics is ABSTRACT! You can extend Graphics You can get instances of the Graphics class From the paint method From an instance of an java.awt.Image From a java.awt.Component. - PowerPoint PPT PresentationTRANSCRIPT
Draw Shapes
Introduction to simple graphics
What is a graphics context?
An instance of the Graphics class Graphics is ABSTRACT! You can extend Graphics You can get instances of the Graphics class
From the paint methodFrom an instance of an java.awt.ImageFrom a java.awt.Component
Why do I need a graphics context? To get access to simple 2D draw methods.
- Draw Business graphics
- Draw Vectors into the screen.
- Draw text
- Draw java.awt.Images
- simple shapes (2D)
- I can print vectors, and bit map.
Built-in Graphics Functions
The Java Graphics Objects includes dozens of drawing functions:drawLine()drawOval()drawPolygon()drawRect()draw3DRect() fillOval() fillRect()
Drawing
Draw a yellow-filled rectangle:g.setColor (new Color (255,255,206));g.fillRect (50, 50, 215,100);
Draw a black perimeter around the yellow rectangle.g.setColor (Color.black);g.drawRect (50,50,215,100);
Draw a line underneath the welcome message.g.drawLine (80,105,227,105);
Who calls Paint?
public void paint(Graphics g) {...Not the programmerNot the JVMAWT Event Dispatcher (it runs in a thread).called in response to a repaint invocation!repaint()repaint(1000); // paint invoked in 1 second
When does the Damage control manager invokes repaint? If there is damage, damage control for the
window causes repaint. Window resize Window exposed Component demands. repaint(int x, int y, int w, int h)
Damage control manager
AWT Dispatcher
Component
repaint
Damage caused
update
Window system
Dimensions
Windows have dimension let Window w = new Window(); //then Dimension d = w.getSize(); Components have dimensions too. Int w = d.width; Int h = d.height;
Coordinates
Integers
0,0
(w,h)
x
y
Custom painting (1)
Occurs between background and border Extend component and customise
JPanel recommended e.g. class myPaintingPanel extends JPanel {
can also use atomic components e.g. class myPaintingButton extends JButton {
Code goes in overridden paintComponent() methodpublic void paintComponent(Graphics g) {
Custom painting (2)
When writing custom painting codeshould not reproduce painting functionality of
any other Swing component
Before doing anything else in paintComponent() invoke super.paintComponent() orsetOpaque(false)
Painting coordinates
Component sizes in pixels(0,0) at top left corner(width-1,height-1) at bottom right corner
Border sizes (e.g. a 1-pixel border)(1,1) at top left(width-2, height-2) at bottom right
General painting area for b pixel border [ {b,b} : {w-(b+1), h-(b+1)} ]
Getting painting coordinates
Use component getWidth() and getHeight() Get border sizes with getInsets()
e.g. to get width and height of custom painting area use something like:
Insets insets = getInsets();int currentWidth = getWidth() -
insets.left - insets.right;int currentHeight = getHeight() -
insets.top - insets.bottom;
Repainting custom paints
Calling repaint() method requests a repaint to occur repaint()
paints whole component & any others that need it if transparent repaint(int leftx,int lefty,int width,int height);
only repaints a specified area
Component painted after all pending events dispatched.
Painting should be kept short - Done in event thread - slows GUI
Formula for a circle
Implicit formula(X-xc)^2 + (Y-yc)^2 = R^2
Parametric Formula X = sin(t)+xcY = cos(t)+ycT is in the range from 0 to 1 inclusive
For a line
Y=mx+b, where m = slope, b = y intercept F(t) = P0(1-t)+P1(t) P0 = (x0,y0) P1=(x1,y1) F(t)=P0-p0t+p1t=t(p1-p0)+p0
Vector Graphics
Legend
Stock price, sample rate (once every 30 sec).
Drawing text strings
Graphics2D public void drawString(String s, int x, int y)Draws given string with its first letter's bottom-left corner at the given location. The string is drawn using the Graphics2D's current color and
font settings. Before drawing the string, you can set the font, color, and other
attributes.(see next slides)
Fonts
Graphics2D public void setFont(Font f)
Sets this Graphics context to start writing text in the given font. (Forgotten at end of paintComponent call!)
java.awt.Font
Text styles used when drawing Strings on the panel
public Font(String name, int style, int size) some predefined font names:
"Serif", "SansSerif", "Monospaced" font styles (can be combined with + operator):
Font.BOLD Font.ITALIC Font.PLAIN
Drawing Arcs
ArcsOutlined Arc
g.drawArc(topLeftX, topLeftY, width, height, startAngle, arcAngle);
Filled Arc g.fillArc((topLeftX, topLeftY, width, height,
startAngle, arcAngle);
Drawing Rectangles
RectangleOutlined Rectangle
g.drawRect(topLeftX, topLeftY, width, height);
Filled Rectangle g.fillRect(topLeftX,topLeftY,width,height);
Outlined Rounded Rectangle
g.drawRoundRect(topLeftX,topLeftY,width,height,arcWidth,arcHeight);
Filled Rounded Rectangle g.fillRoundRect(topLeftX,topLeftY,width,height,arc
Width,arcHeight);
Drawing on a Blank Picture
You can make pictures from the “blank” filesThey will have all white pixels640x480.jpg7inX95in.jpg
create a “blank” picture with a width and height
They will also have all white pixelsPicture blankPicture = new
Picture(width,height);
Draw a Picture Exercise
Create a method that will draw a simple picture Use at least one
rectangle Use at least one
polygon Use at least one oval Use at least one arc
Bitmapped Versus Vector Graphics Some applications use vector graphics
which are programs that produce the pictureUsed in Postscript, Flash, and AutoCADAdvantages: smaller, easy to change, can be
scaled
Precision Drawings
draw a stack of filled rectangles starting from the lightest one at the bottom right and the darkest one at the top left. 10 pixels between each Not easy with drawing
packages
Draw Filled Rectangles Method
public void drawFilledRectangles(){ Graphics g = this.getGraphics(); Color color = null; // loop 25 times for (int i = 25; i > 0; i--) { color = new Color(i * 10, i * 5, i); g.setColor(color); g.fillRect(0,0,i*10,i*10); }}
Java 2D Graphics – java.awt Newer drawing classes
More object-oriented Instead of drawOval() or fillOval() you create a
Ellipse2D object and ask a 2d graphics object to draw or fill it
Geometric shapes are in the java.awt.geom package
Advanced Drawing
Support for different types of brushes Line thickness, dashed lines, etc
Supports cubic curves and general pathsDrawing of gradients and texturesMove, rotate, scale and shear text and
graphicsCreate composite images
Java 2D Demo
http://www.codesounding.org/java2demo.jnlp
How To Use Java 2D
Cast the Graphics class to Graphics2D Graphics2D g2 = (Graphics2D) gObj;
Set up the stroke if desired (type of pen) g2.setStroke(new BasicStroke(widthAsFloat));
Set up any Color, GradientPaint, or TexturePaint
g2.setPaint(Color.blue); g2.setPaint(blueToPurpleGradient); g2.setPaint(texture);
Create a geometric shape Line2D line2D = new
Line2D.Double(0.0,0.0,100.0,100.0); Draw the outline of a geometric shape
g2.draw(line2d); Fill a geometric shape
g2.fill(rectangle2d);
Graphics2D inherits from Graphics Inherits basic drawing ability
from Graphics Adds more advanced
drawing ability
Graphics
Graphics2D
Drawing Lines Exercise
Create a new method (drawWideX) for adding two wide crossed lines to a picture passed color passed line width
Set up the stroke to make the lines thicker
g2.setStroke(new BasicStroke(width));Draw the lines
You can use redMotorcycle.jpg to test.
Colors and paints
java.awt.Color(a simple single-colored paint) public Color(int r, int g, int b) public Color(int r, int g, int b, int alpha)
a partially-transparent color (range 0-255, 0=transparent)
Colors and paints..
public Color brighter(), darker() public static Color black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, yellow
java.awt.GradientPaint(smooth transition between 2 colors) public GradientPaint(float x1, float y1, Color color1, float x2, float y2, Color color2)
java.awt.TexturePaint(use an image as a "paint" background)
Shapes (old style)
Graphics2D public void drawLine(int x1, int y1, int x2, int y2)
public void drawOval(int x, int y, int w, int h)
public void fillOval(int x, int y, int w, int h)
Polygons
public void drawPolygon(int[] xpoints, int[] ypoints, int len)
public void fillPolygon(int[] xpoints, int[] ypoints, int len)
public void drawRect(int x, int y, int w, int h) public void fillRect(int x, int y, int w, int h) public void drawArc(...) public void fillArc(...)
...
Drawing methods for drawing various lines and shapes on a Graphics context. Not recommended to be used replaced by draw(Shape), fill(Shape) in Graphics2D
Graphics2D shape methods
public void draw(Shape s)Draws the outline of the given shape using this Graphics2D's current pen.
public void fill(Shape s)Draws outline and fills inside of given shape.
rotate, scale, translate, shear, transformPerform various coordinate transformations on the Graphics2D context.
Shapes (in package java.awt.geom)
Arc2D.Double(double x, double y, double w,
double h, double start, double extent, int type)An arc, which is a portion of an ellipse.
Ellipse2D
Ellipse2D.Double(double x, double y, double w, double h)An ellipse, which is a generalization of a circle.
Line2D.Double(double x1, double y1, double x2, double y2)Line2D.Double(Point p1, Point p2)A line between two points.
Shapes
Rectangle2D.Double(double x, double y, double w, double h)A rectangle, which is a generalization of a square.
RoundRectangle2D
RoundRectangle2D.Double( double x, double y, double w, double h, double arcx, double arcy)A rounded rectangle.
GeneralPath()A customizable polygon.
Methods of to all shapes
public boolean contains(double x, double y)public boolean contains(Point2D p)Whether the given point is contained inside the bounds of this
shape.
Rectangle
public Rectangle getBounds()A rectangle representing the bounding box around this shape.
public double getCenterX() / getCenterY() public double getMinX() / getMinY() public double getMaxX() / getMaxY()
Various corner or center coordinates within the shape.
public boolean intersects(double x, double y, double w, double h)
public boolean intersects(Rectangle2D r)Whether this shape touches the given rectangular region.
Strokes (pen styles)
Graphics2D public void setStroke(Stroke s)
Sets type of drawing pen (color, width, style)that will be used by this Graphics2D.
java.awt.BasicStroke
A pen stroke for drawing outlines
public BasicStroke(float width) public BasicStroke(float width, int cap, int join)
public BasicStroke(float width, int cap, int join, float miterlimit, float[] dash, float dash_phase)
cap: CAP_BUTT, CAP_ROUND, CAP_SQUARE join: JOIN_BEVEL, JOIN_MITER, JOIN_ROUND
Drawing example 1
public void paintComponent(Graphics g) {
super.paintComponent(g); Graphics2D g2 = (Graphics2D) g; g2.fill(new Rectangle2D.Double(10, 30, 60, 35));
g2.fill(new Ellipse2D.Double(80, 40, 50, 70));
}
Drawing example 2
public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D) g;
g2.setPaint(Color.BLACK); g2.fill(new Rectangle2D.Double(10, 30, 100, 50)); g2.setPaint(Color.RED); g2.fill(new Ellipse2D.Double(20, 70, 20, 20)); g2.fill(new Ellipse2D.Double(80, 70, 20, 20)); g2.setPaint(Color.CYAN); g2.fill(new Rectangle2D.Double(80, 40, 30, 20));}
Drawing example 3
public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D) g;g2.setPaint(Color.BLUE);for (int i = 1; i <= 10; i++) {g2.fill(new Ellipse2D.Double(15 * i, 15 * i, 30, 30));
} g2.setPaint(Color.MAGENTA); for (int i = 1; i <= 10; i++) { g2.fill(new Ellipse2D.Double(15 * (11 - i), 15 * i,
30, 30); }}
Using a Graphics Object to Copy an Image
public void copy(Picture source, int x, int y){
// get the graphics object
Graphics g = this.getGraphics();
// copy the image
g.drawImage(source.getImage(),x,y,null);
}
Using Graphics2D to Copy an Imagepublic void copy2D(Picture source, int x, int
y){ // get the graphics object
Graphics g = this.getGraphics();
Graphics g2 = (Graphics2D) g;
// copy the image
g2.drawImage(source.getImage(),x,y,null);
}
Testing the Copy Method
Picture p1 = new Picture(FileChooser.getMediaPath("beach.jpg"));
Picture p2 = new Picture(FileChooser.getMediaPath("turtle.jpg"));
p1.copy2D(p2,194,304); p1.show();
Drawing images
Graphics2D public void drawImage(Image i, int x, int y, ImageObserver io)
public void drawImage(Image i, int x, int y, int width, int height, ImageObserver io)
Draws given image object on this Graphics context with its top-left corner at given location (pass the panel as the ImageObserver).
Classes for imaging
java.awt.ToolkitGets images from disk or internet public static Toolkit getDefaultToolkit() public Image getImage(String filename) public Image getImage(URL address)
java.awt.MediaTracker
Ensures that images are loaded fully public MediaTracker(Component comp) public void addImage(Image img, int id) public void waitForAll()
throws InterruptedException
java.awt.ImageRepresents a graphic image (BMP, GIF, ...) public int getWidth(ImageObserver obs) public int getHeight(ImageObserver obs)
java.awt.image.BufferedImageA blank graphic image surface onto which you can draw public BufferedImage(int w, int h, int type) public Graphics getGraphics()
Images, continued
Code to load an image:Toolkit tk = Toolkit.getDefaultToolkit();
Image img = tk.getImage("myimage.jpg");
MediaTracker mt = new MediaTracker(this);
mt.addImage(img, 0); // any ID will do
try {
mt.waitForAll();
} catch (InterruptedException ie) {}
A helper method to load and return one image
public Image loadImage(String filename)
Advanced: anti-aliasing
Onscreen text and shapes can have jagged edges, or aliases. These can be removed by smoothing, or anti-aliasing, the panel.
Graphics2D
public void setRenderingHint( RenderingHints.Key key, Object value)Example:g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
Icon/ImageIcon
Allows you to put a picture on a button, label or other component
public class ImageIcon implements Icon public ImageIcon(String filename) public ImageIcon(URL address)
in JButton, JRadioButton, JCheckBox, JLabel, etc... constructor that takes an Icon public void setIcon(Icon) public void setSelectedIcon(Icon) public void setRolloverIcon(Icon)
JToolBar
A movable container to hold common buttons, commands, etc
JToolBar
public JToolBar() public JToolBar(int orientation) public JToolBar(String title) public JToolBar(String title, int orientation)
Constructs a new tool bar, optionally with a title and orientation; can be JToolBar.HORIZONTAL or VERTICAL, defaults to horizontal
public void add(Component comp)Adds the given component to this tool bar's horizontal/vertical flowing layout.
JToolBar: Usage
construct toolbar add items (usually buttons) to toolbar add toolbar to edge of BorderLayout of
content pane (usually NORTH)don't put anything in other edges (N/S/E/W)!
Summary Graphics class for simple 2d drawing
Lines, rectangles, ovals, polygons, strings, images
Graphics2D for more advanced drawingWidth of paint brush, paint geometric objects
Graphics2D inherts from GraphicsMeans it can do the same methodsBut also adds others