Top Banner
Chapter 7 Graphics
14

Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

Jan 03, 2016

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

Chapter 7

Graphics

Page 2: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Objectives• Use Graphic Components:

▫ Strings▫ Lines▫ Rectangles▫ Ovals▫ Arcs

• Change the color and font of elements.

2© Daly and Wrigley

Page 3: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Graphical User Interfaces• Swing Set

▫ Flexible cross-platform GUIs that allow windows to appear in a similar format on different operating systems. 

▫ Start with a “J” (example: JFrame)▫ Import: import javax.swing.*;

• Abstract Windowing Toolkit▫ Older GUI components, change colors, or change fonts ▫ Import: import java.awt.*;

3

Page 4: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

JFrameBefore GUI components can be placed onto the screen, a window must first be created to hold these components. 

JFrame frame = new JFrame("Title of window here ");frame.setSize(200, 100);frame.setLocationRelativeTo(null);          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true);

4

Page 5: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Container• Every JFrame has a container called a content pane.  • Purpose - provide a visual area in which to place GUI

components. 

Container content = frame.getContentPane();content.setBackground(Color.YELLOW); 

5

Page 6: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Null Layouts• Place components wherever you would like on the container by

using x and y coordinates.

• To add this JComponent to your content pane called content: content.add(this);

6

Page 7: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Graphic Components• The AWT (Abstract Windowing Toolkit) includes methods for

drawing many different types of shapes, everything from lines to polygons; using colors; using fonts; and drawing images. 

• Painting: allows us to draw graphics on the screen ▫ Paint takes an argument of a Graphics object▫ JComponent has a paint method associated with it ▫ g.drawLine tells the computer to do the method called drawLine on the

Graphics object called g. • public void paint ( Graphics g ) {

    }

7

Page 8: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Strings

g.drawString("This is great", 20,50);

8

Page 9: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Changing the Font• Typeface( font name): Helvetica, Courier, TimesRoman, etc.• Style: Font.PLAIN, Font.BOLD, Font.ITALIC, 

Font.BOLD+Font.ITALIC• Size:  Point size such as 24 point.  Note: These are points -- not

pixels)  The standard typewriter size font is 12 point. 

g.setFont(new Font ("TimesRoman", Font.ITALIC, 72) );

You can also create a font object (instance):Font f = new Font("TimesRoman", Font.BOLD,

36);g.setFont(f) ;    

9

Page 10: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Adding Color• The 13 predefined colors are: white, black, lightGray, gray,

darkGray, red, green, blue, yellow, magenta, cyan, pink and orange.  g.setColor(Color.GREEN);

• Define your own color:   

g.setColor(new Color(100,50,25));

Color myTeal = new Color (0,128,128);g.setColor(myTeal);

10

Page 11: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Drawing Linesg.drawLine(0,0,50,50);       g.drawLine(50,0,50,75);    

11

Page 12: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Drawing Rectangles1. g.drawRect(0, 0, 50, 25); 2. g.setColor(Color.GREEN); g.fillRect(100,0,50,40); 3. g.setColor(Color.BLACK); g.drawRoundRect(175,0,50,50,20,20);       (20 pixel curve)4. g.setColor(Color.RED); g.fillRoundRect(0,75,50,50,35,35);             (35 pixel curve)5. g.setColor(Color.BLACK); g.fillRect(100,100,50,50); 

g.clearRect(120,120,10,10);  6. g.draw3DRect(175,100,50,30,true);          (true means raised)7. g.draw3DRect(250,100,50,20,false);        (false means indented)8. g.setColor(Color.DARKGRAY); g.fill3DRect(250,175,50,20,false);            (false means indented) 

12

Page 13: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Drawing Ovalsg.setColor(Color.BLUE);g.drawOval(0,0,30,60);  // draws an oval starting at point 0,0 width=30, height =60 // see the first oval below

g.fillOval(50,0,100,40);  // draws oval starting pt is 50,0 width =100, height = 40 // see the second filled in oval below

13

Page 14: Chapter 7 Graphics. © Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements.

© Daly and Wrigley

Drawing Arcs

 g.drawArc(0, 40, 50, 50, 0, 75);    // the first arc shown below  // Picture an oval with upperleft corner of its rectangle at 0,40 and its 50 wide and 50 high  // starting angle is 0 which is 3 o'clock  // degrees is 75 which means to go counterclockwise 75 degrees.

g.fillArc(100, 75, 50, 50, 90, 180);  // the filled in black arc below // Picture an oval with upperleft corner of its rectangle at 100,75 and its 50 wide and 50 high // starting angle is 90 which is 12 o'clock // degrees is 180 which means to go counterclockwise 180 degrees // the same arc could be drawn clockwise with  g.fillArc(100, 75, 50, 50, 270, -180);

 

The syntax is: g.drawArc (x, y, width,  height,  startangle,  degrees);

g.fillArc (x, y, width,  height,  startangle,  degrees);

14