Java Applet Drawing Commands

Last Updated Monday, September 26, 2011 10:13 AM

The Java graphics drawing and painting commands are fun to use and help you understand the concept of calling methods with an object.

To jump to one of the specific drawing commands to know how to code it, click one of the following links:

 

 

 

 

 

In a conventional Cartesian Coordinate System, the origin is in the center of the graph or output window.

 

 

 

 

 


 

In an applet or drawing panel within an applet, there are only positive values with the origin (0, 0) in the upper left hand corner.

 

 

 

 

The Graphics Context g

Every applet or frame program that uses the drawing commands must have what we call a graphics context. This graphics context, that is named g by convention, is used to call methods that execute the drawing commands. We are sending a drawing or painting message to the graphics context g.

All commands that have the word "draw" in them, draw an outline of a figure or segment.

All commands that have the word "fill" in them, paint the entire enclosed space of a figure, like a rectangle or polygon.

Here is a list of Java drawing commands in general form, their explanations and examples of how to use them.

 

g.drawLine (x1, y1, x2, y2);

Draws a line from (x1, y1) to (x2, y2).

Example: draw a line between the points (10, 25) and (40, 55).

Code: g.drawLine (10, 25, 40, 55);


g.drawRect (x, y, width, height);

Draws the outline of a rectangle whose upper-left corner is (x, y)and whose dimensions are the specified width and height.

Example: draw the rectangle beginning at the upper-left corner represented by the point (75, 40) with a width of 200 and a height of 150.

Code: g.drawRect (75, 40, 200, 150);

g.fillRect (x, y, width, height);

Paints a rectangle whose upper-left corner is (x, y) and whose dimensions are the specified width and height.

Example: paint the rectangle beginning at the upper-left corner represented by the point (75, 40) with a width of 200 and a height of 150.

Code: g.fillRect (75, 40, 200, 150);

g.clearRect (x, y, width, height);

Paints a rectangle whose upper-left corner is (x, y) and whose dimensions are the specified width and height with the current background color.

Example: clear the rectangle beginning at the upper-left corner represented by the point (75, 40) with a width of 200 and a height of 150.

Code: g.clearRect (75, 40, 200, 150);

g.drawRoundRect (x, y, width, height, arcWidth, arcHeight);

Draws the outline of a rounded rectangle whose upper-left corner is (x, y) and whose dimensions are the specified width and height. The corners are rounded according to the last two parameters. To make them perfectly symmetrical, make the last two values equal.

Example: draw the rounded-rectangle beginning at the upper-left corner represented by the point (300, 400) with a width of 100 and a height of 50 that has an arcWidth of 10 and an arcHeight of 10.

Code: g.drawRoundRect (300, 400, 100, 50, 10, 10);

g.fillRoundRect (x, y, width, height, arcWidth, arcHeight);

Paints a rounded rectangle whose upper-left corner is (x, y) and whose dimensions are the specified width and height. The corners are rounded according to the last two parameters. To make them perfectly symmetrical, make the last two values equal.

Example: paint the rounded-rectangle beginning at the upper-left corner represented by the point (300, 400) with a width of 100 and a height of 50 that has an arcWidth of 10 and an arcHeight of 10.

Code: g.fillRoundRect (300, 400, 100, 50, 10, 10);

g.drawOval (x, y, width, height);

Draws the outline of an oval that fits within a rectangle whose origin (upper-left corner) is (x, y) and whose dimensions are the specified width and height. To draw a circle, make the width and height equal.

Example: draw an oval whose upper-left corner is at the point (500, 300) and whose width is 200 and whose height is 50.

Code: g.drawOval (500, 300, 2000, 50);

g.fillOval (x, y, width, height);

Paints an oval that fits within a rectangle whose origin (upper-left corner) is (x, y) and whose dimensions are the specified width and height. To draw a circle, make the width and height equal.

Example: paint an oval whose upper-left corner is at the point (500, 300) and whose width is 200 and whose height is 50.

Code: g.fillOval (500, 300, 2000, 50);

g.drawArc (x, y, width, height, startAngle, arcAngle);

Draws the outline of an arc that is a portion of an oval that fits within a rectangle whose upper-left corner is (x, y) and whose dimensions are the specified width and height. The arc is drawn from startAngle to startAngle + arcAngle. The angles are expressed in degrees. A startAngle of 0 indicates the 3 o'clock position. The arcAngle indicates how much and what direction is swept to draw the arc. A positive arc indicates a counterclockwise rotation, and a negative arc indicates a clockwise rotation from 3 o'clock.

Example: draw the arc whose upper-left corner of its oval is the point (100, 100) where the oval has a width of 50 and a height of 50 and whose startAngle is 180 and whose arcAngle is 135.

Code: g.drawArc (100, 100, 50, 50, 180, 135);

Example: draw the arc whose upper-left corner of its oval is the point (100, 100) where the oval has a width of 50 and a height of 50 and whose startAngle is 90 and whose arcAngle is -45.

Code: g.drawArc (100, 100, 50, 50, 90, -45);

g.fillArc (x, y, width, height, startAngle, arcAngle);

Paints an arc that is a portion of an oval that fits that fits within a rectangle whose upper-left corner is (x, y) and whose dimensions are the specified width and height. The arc is drawn from startAngle to startAngle + arcAngle. The angles are expressed in degrees. A startAngle of 0 indicates the 3 o'clock position. The arcAngle indicates how much and what direction is swept to paint the arc. A positive arc indicates a counterclockwise rotation, and a negative arc indicates a clockwise rotation from 3 o'clock.

Example: draw the arc whose upper-left corner of its oval is the point (100, 100) where the oval has a width of 50 and a height of 50 and whose startAngle is 180 and whose arcAngle is 135.

Code: g.fillArc (100, 100, 50, 50, 180, 135);

Example: draw the arc whose upper-left corner of its oval is the point (100, 100) where the oval has a width of 50 and a height of 50 and whose startAngle is 90 and whose arcAngle is -45.

Code: g.fillArc (100, 100, 50, 50, 90, -45);

g.drawPolygon (x, y, n);

Draws a polygon where the abscissas and ordinates of a set of points have been defined in two simple arrays prior to making a call to drawPolygon. The parameter n represents the number of sides of the polygon. We usually just place the correct number in place of n. For example, if we have 3 sets of points, then put 3 in place of n.

Example: the (x, y) points are (10, 25), (40, 25), (60, 50), (30, 60), (40, 40). There are 5 sets of points which define a pentagon, so we will place 5 in place of n.

Code:

int x [ ] = {10, 40, 60, 30, 40};

int y [ ] = {25, 25, 50, 60, 40};

g.drawPolygon (x, y, 5);

g.fillPolygon (x, y, n);

Paints a polygon where the abscissas and ordinates of a set of points have been defined in two simple arrays prior to making a call to drawPolygon. The parameter n represents the number of sides of the polygon. We usually just place the correct number in place of n. For example, if we have 3 sets of points, then put 3 in place of n.

Example: the (x, y) points are (10, 25), (40, 25), (60, 50), (30, 60), (40, 40). There are 5 sets of points which define a pentagon, so we will place 5 in place of n.

Code:

int x [ ] = {10, 40, 60, 30, 40};

int y [ ] = {25, 25, 50, 60, 40};

g.fillPolygon (x, y, 5);

g.drawString (str, x, y);

Draws a string. The point (x, y) indicates the position of the base line of the first character.

Example: draw the words "Java Rules" at the point (10, 50).

Code: g.drawString ("Java Rules", 10, 50);

Changing the Font for drawString.

You can use any font that is on your system and drawString will draw it in the output window in Eclipse when you run a JFrame or JApplet program. However, if you use a font on your computer in an applet program that ends up on the web, then someone else's computer may not be able to display your font if it is not one of their system fonts. So its best to stick to a font that you know all computers are likely to have. Some of those like "Times", "Arial", "Courier" are on all computers generally. Potentially there are a lot more, but realize that Window machines and Macs don't have exactly the same fonts and even computers on the same platform don't necessarily have exactly the same fonts.

Here is how to set the font you want to use:

Choose a font name, font style, and font size and apply them as follows:

Font font = new Font (<Font Name>, <Font Style>, <Font Size>);

The Font Name must be in double quotes.

The Font Style is usually a constant from the Font class. The Font Style can be PLAIN, BOLD, ITALIC, or BOLD+ITALIC.

The Font Size is an integer of a meaningful size.

Example:

Font font1 = new Font ("Arial", Font.BOLD, 18); // note the variable here is font1

Next you must set the font before calling drawString.

g.setFont(font1);

Now call drawString:

g.drawString("Java Rules", 100, 100);

If you need to, you can stop and define a different font and set the font as the current active one prior to any drawString statement.

Font font1 = new Font ("Arial", Font.BOLD, 18);

g.setFont(font1);

g.drawString("Java Rules", 100, 100);

Font font2 = new Font ("Arial", Font.ITALICS, 14);

g.setFont(font2);

g.drawString("Rockets are Cool! ", 200, 200);

Font font3 = new Font ("Arial", Font.PLAIN, 12);

g.setFont(font3);

g.drawString("The Rocket Festival is Coming ", 300, 300);

But if you want to use the same font over and over, then just place the lines where you define and set the font at the beginning of the code segment you are writing.

Font font4 = new Font ("Arial", Font.BOLD+Font.ITALIC, 18);

g.setFont(font1);

g.drawString("Java Rules", 100, 100);

g.drawString("Rockets are Cool! ", 200, 200);

g.drawString("The Rocket Festival is Coming ", 300, 300);

For more on all of this explore the Font class API.

How to place applet programs on a web server.

To embed an applet program in a web page so it will display, you need to do a number of things:

TAKE ALL OF THIS SLOW AND DOUBLE CHECK AS YOU GO AND YOU'LL BE SUCCESSFUL! OTHERWISE, YOU'LL END UP DOING IT OVER!

Here is what the code looks like in the CarApplet.html file:

<title> Car Applet </title>

<body bgcolor="#99FF99">

<CENTER>

<applet archive = "CarApplet.jar" code="CarApplet.class" width=1000 height=600> </applet>

</CENTER>

 

The web page will first display the title "Car Applet" in the title bar of your browser window. This is done by the title tag that begins with the opening tag <title> and the ending tag </title>.

(Note: all closing tags begin with a forward slash /)

Next, the background color (bgcolor) of the web page is set to an aqua-green color using the opening body tag: <body bgcolor="#99FF99"> There is no closing body tag. Note the hexadecimal numbers that represent the color agua-green. (You can come up with your own colors and substitute just so they provide a professional presentation for the applet.)

Next, since we want to center the applet within the web page, we first use the opening tag: <CENTER>

Next, we place our entire applet tag on one line. The opening tag is: <applet archive = "CarApplet.jar" code="CarApplet.class" width=1000 height=600>

and it is immediately followed by the closing tag: </applet>

Its this code that allows the browser to display the applet.

The opening applet tag states that the web page needs to reference a compressed archive file that is a jar file named CarApplet.jar. And inside of that jar file will be found the byte code file CarApplet.class.

We needed to name the jar file CarApplet.jar, because we want the JVM to run your CarApplet.java driver file NOT the CarPanel.java file. Hopefully you see the correlation in the names that we chose.

Also within the opening applet tag is code that defines the size of the applet to be 1000 pixels by 600 pixels.

Finally, after the opening and closing applet tags we have our closing center tag.

(Obviously, web pages can have much more complex code than this, but this is all we need to get our applets to run on the web.


Back to Top