Drawing Shapes and Text With Applets 1 Drawing

Drawing Shapes and Text With Applets 1

Drawing in the paint method import java. awt. *; object import javax. swing. *; // access the Graphics // access to JApplet public class Draw. Ex extends JApplet { public void paint( Graphics g ) { // put your code here! } } 2

Graphics • paint method: – basic method for showing graphics objects – base class has a paint method which does nothing – you can override the paint method by writing your own paint method • Browser decides when to call paint method – When user Scrolls – When user returns to window with applet – When user Resizes • We can explicitly call it repaint( ); 3

Coordinates • (0, 0) in upper left corner • Example import java. awt. *; import javax. swing. *; public class Coords extends JApplet { public void paint( Graphics g ) { g. draw. String( "(0, 0)", 0, 0 ); g. draw. String( "(100, 10)", 100, 10 ); g. draw. String( "(20, 50)", 20, 50 ); g. draw. String( "(190, 90)", 190, 90 ); } } • Why can’t we see “(0, 0)” printed? 4

Text • To draw text on the applet, we call Graphics. Obj. draw. String( “text string”, x, y ) Notice the 'g' from "Worldling" hanging in to view. . . import java. awt. *; // access the Graphics object import javax. swing. *; // access to JApplet public class Text 1 extends JApplet { public void paint ( Graphics gr ) { gr. draw. String ( "Hello Worldling", 0, 0 ); gr. draw. String ( "Java rocks", 0, 50 ); gr. draw. String ( "Skiing is fun", 50 ); gr. draw. String( "To be, or not 2 B", 50, 65 ); } } 5

Graphics g The name for the Graphics object in the main method must match the name of the object when we call draw. String public void paint( Graphics grp ) { grp. draw. String( "Some text to display", x, y ); } public void paint( Graphics g ) { g. draw. String( "Some text to display", x, y ); } 6

Font • Don’t reference special fonts that most people don’t have installed on their systems! • Standard font names: – Serif, San. Serif, Monospaced Font f = new Font( “Serif”, Font. PLAIN, 14 ); g. set. Font( f ); • Font. BOLD, Font. ITALIC, Font. PLAIN – How would you do bold and italic? 7

Font Example import java. awt. *; import javax. swing. *; public class Text. Fonts extends JApplet { public void paint ( Graphics g ) { g. draw. String ("Hello World", 0, 10 ); Font small = new Font( "Serif", Font. PLAIN, 8 ); g. set. Font( small ); g. draw. String ("Java rocks", 0, 50 ); Font big = new Font( "San. Serif", Font. BOLD + Font. ITALIC, 36 ); g. set. Font( big ); g. draw. String ( "Skiing is fun", 50 ); } } 8

Colors • Java Method: . set. Color( color ) • color should be Color. name where name can be: – BLACK, BLUE, CYAN, YELLOW, DARKGRAY, GREEN, LIGHTGRAY, MAGENTA, ORANGE, PINK, RED, WHITE – Example: • Color. GREEN • Color. BLUE 9

Colors • or, make your own color – Color mine = new Color( 0, 255, 128 ); – values are the amount of red, green, and blue (RGB values) – values are between 0 and 255, where 0 is black and 255 is white – Example: 200 10 128 200 red, 10 green, half-blue – Use your paint program to determine values • Java statement example: g. set. Color( Color. cyan ); set. Background( Color. yellow ); set. Foreground( new Color( 33, 200, 190 ) ); 10

Custom Colors • Websites and paint programs can help determine the RGB values for a color • Example: Microsoft Paint Colors Edit Colors Define Custom Colors… RGB values as displayed inside MS Paint 11

Color Example import java. awt. *; import javax. swing. *; public class Color. Ex extends JApplet { public void paint ( Graphics g ) { g. set. Color( Color. RED ); g. draw. String( "My favorite color", 30, 45 ); g. set. Color( new Color( 12, 34, 52) ); g. draw. String( "Can't wait to ski again", 30, 53 ); } } 12

Drawing • draw • fill • draw 3 D public void draw. Rect( int x, int y, int w, int h ) public void fill. Rect( int x, int y, int w, int h ) public void draw 3 DRect( int x, int y, int w, int h ) public void draw. Line( int x, int y, int x 2, int y 2 ) public void fill. Oval( int x, int y, int w, int h ) public void fill. Arc( int x, int y, int w, int h, int st. A, int arc. A) 13

Drawing Example import java. awt. *; import javax. swing. *; // access the Graphics object // access to JApplet public class Shapes extends JApplet { public void paint ( Graphics g ) { g. draw. Oval( 0, 0, 10 ); g. draw. Rect ( 10, 20, 20 ); g. set. Color( Color. BLUE ); g. draw. Rect ( 40, 80, 10, 40 ); g. set. Color( Color. RED ); g. fill. Oval ( 5, 30, 77, 10 ); } } 14

3 DRect Example import java. awt. *; import java. swing. *; public class Rect 3 D extends JApplet { Can be hard to public void paint( Graphics g ) discern the 3 -D… try { different colors // raised g. set. Color( Color. RED ); g. draw 3 DRect( 20, 50, 100, 20, true ); g. draw 3 DRect( 21, 51, 98, 18, true ); // sunken g. draw 3 DRect( 20, 200, 100, 20, false ); g. draw 3 DRect( 21, 201, 98, 18, false ); To make it thicker: } draw multiple times } change x, y, w, h 15

Arc public void fill. Arc( int x, int y, int w, int h, int st. A, int arc. A) • st. A = starting angle: • arc. A = arc angle 16

Arc Example import javax. swing. *; import java. awt. *; public class Pie. Chart extends JApplet { public void paint( Graphics g ) { // pie g. set. Color( Color. red ); g. fill. Arc( 20, 300, 20, 90 ); g. set. Color( Color. yellow ); g. fill. Arc( 20, 300, 110, 45 ); g. set. Color( Color. blue ); g. fill. Arc( 20, 300, 155, 180 ); // outline g. set. Color( Color. black ); g. draw. Arc( 20, 300, 0, 360 ); } } drawing the outline has to be done last – Why? To overlay it on top of color pies 17

Images • Call method _____ Image image. Variable = get. Image( get. Code. Base( ), filename ); • Graphics method draw. Image Needs the keyword _______ ); g. draw. Image( image. Variable, x, y, this 18

Image Example import javax. swing. *; import java. awt. *; public class Image. Ex extends JApplet { public void paint( Graphics g ) { Image img = get. Image( get. Code. Base( ), "Lion. jpg" ); g. draw. Image( img, 0, 0, this ); } } 19

Summary of drawing methods Lines Rectangles draw. Line(x, y, x 2, y 2) Rounded rectangles 3 -D raised or lowered rectangles clear. Rect(x, y, width, height) Ovals Arcs draw. Oval(x, y, width, height) draw. Rect(x, y, width, height) fill. Rect(x, y, width, height) Raised: draw 3 DRect(x, y, width, height, true) Lowered: draw 3 DRect(x, y, width, height, false) Raised: fill 3 DRect(s, y, width, height, true) Lowered: fill 3 DRect(x, y, width, height, false) draw. Arc(x, y, width, height, start. Angle, arc. Angle) fill. Arc(x, y, width, height, start. Angle, arc. Angle) 20