Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Drawing Graphics
Document related concepts
no text concepts found
Transcript
CS101
Web Applets, Intro to Graphics
So far, the Java programs we have written have been Java applications. They are standalone programs that run under the Java interpreter. A slightly different type of Java
programs is the Java applet. The applet is designed to run inside a web browser rather
than as a stand-alone program.
To run a Java applet, you must make sure that the Java runtime environment is installed
on your computer. If you are running Netscape it will already be there, but if you are
running Internet Explorer (or something else) then you might need to install it. You can
download and install the Java runtime environment from
http://java.sun.com/j2se/1.4/download.html by installing the Java SDK. This also allows
you to compile and run Java applications on your system.
To write a Java applet requires two things:
• Writing Java code, with some extras designed for the web
• Creating a web page that will link to the Java class
Here is a template that you can use for a Java applet. This applet prints “Hello, world”:
import java.applet.*;
import java.awt.*;
public class HelloWorld extends Applet {
// init is like main() for an application.
// It is invoked automatically when the applet runs
public void init() {
setBackground( Color.black );
}
// The paint method is invoked automatically whenever
// the graphics screen needs to be refreshed
public void paint( Graphics g ) {
g.setColor( Color.green );
g.drawString(“Hello, world”, 50, 10);
}
}
Create this in a file called HelloWorld.java just as you would a regular java application.
Compile it using “javac HelloWorld.java” to create the object file, “HelloWorld.class”.
All applets should have a method called init(). This method is invoked automatically
when the applet first loads. In this case, we don’t do anything except set the background
to black. Later we’ll see how to set the background to other colors.
The paint() method is invoked whenever the screen needs to be refreshed. For example,
when the window is drawn for the first time, or if it is minimized and then maximized,
the contents of the window need to be re-“paint”-ed. You should place code in here that
determines what will be displayed in the Java applet.
In this case, we are only doing two things in the applet: setting the color to green, and
then drawing the text “Hello World” at x-coordinate 50, y-coordinate 10.
To see the program run in your browser, first enter it using pico and then compile it on
mazzy:
¾ javac HelloWorld.java
Make sure the file “HelloWorld.class” is in your public_html directory. For example,
either create the file in the public_html directory to start with, or move it to the
public_html directory:
¾ mv HelloWorld.class ~/public_html
Make sure you are in your public_html directory:
¾ cd ~/public_html
Now create a HTML file named whatever you like that will reference the java applet.
Let’s say you decide to make the file called “Hello.html”. The contents of this HTML
file should contain the following tag where you would like the applet to be visible:
<applet width=300 height=300 code="HelloWorld.class"> </applet>
When you are working on your own files, substitute “HelloWorld.class” for your class
object. Also feel free to change the width and height. For example the Hello.html file
might look like the following:
<html>
<head>
<title>My Java Applet</title>
</head>
<body>
Here is my applet:
<p>
<applet width=300 height=300 code="HelloWorld.class"> </applet>
</body>
</html>
Finally, you can view your applet by loading the “Hello.html” file located at
http://www.mazzy.math.uaa.alaska.edu/~yourusrername/Hello.html
Here is what this applet will look like:
You can use the above as a template for how to make your applets. For your
assignments, you will be asked to substitute different code in place of the “paint” method.
Drawing Graphics
Let’s back up and talk about some basics of how we draw graphics. The graphics screen
is set up as a grid of pixels where the upper left coordinate is 0,0. This is relative to
where the canvas is on the viewframe. The x coordinate then grows out to the right, and
the y coordinate grows down toward the bottom.
(0,0)
y
x
(600, 400)
Here is some sample code that illustrates drawing a few simple graphics:
import java.applet.*;
import java.awt.*;
public class GraphicsTest extends Applet {
public void init() {
setBackground( Color.yellow );
}
public void paint( Graphics g ) {
g.setColor( Color.red );
g.drawRect(40,10,100,70);
g.drawString("Moof.", 100, 200);
}
}
This code produces the following image when linked to a web page and loaded in a
browser:
In this code, we are importing java.awt.* to get access to some of the graphics functions
and java.applet.* to get at applet functions.
The graphics parameter variable named “g” of the paint() method is what we access to
draw shapes. Graphics is a class that supports many drawing functions. Here we are
using drawRect and drawString. drawRect(x1,y1,width,height) draws a rectangle with the
upper left corner at (x1,y1) and the specified width and height. drawString(string, x1,
y1) draws the ASCII text string at coordinates x1, y1.
Note that the drawing is done relative to where the applet is placed on the web page, not
relative to the entire window.
Colors
Here are different colors available using the color class:
Color.black
Color.blue
Color.cyan
Color.pink
Color.yellow
Color.darkGray
Color.green
Color.magenta
Color.red
Color.gray
Color.lightGray
Color.orange
Color.white
To create our own color, we can specify the color we want in RGB (red, green, blue). To
do this, use:
new Color(redvalue, greenvalue, bluevalue);
where each value is in the range 0-255.
For example:
new Color(0,255,200);
Creates a green-blue color, with stronger green than blue.
More drawing functions
Here is a list of other drawing functions you can use with the graphics object:
setColor(color)
Sets the current color to a color defined as above
drawLine(int x1, int y1, int x2, int y2)
Draws a line in the current color from x1,y1 to x2,y2
Can use x2=x1 and y2=y1 to draw a single pixel
drawOval(int x, int y, int width, int height)
Draws an oval in the current color within a box at upper left corner x,y
With specified width and height in pixels
Use width = height to draw a circle
drawRect(int x, int y, int width, int height)
Draws a rectangle in the current color with upper left corner at x,y
With specified width and height in pixels
drawArc(int x, int y, int width, int height, int startAngle, int arcAngle)
Draws an arc in the current color at the coordinates and specified angle
fillOval(int x, int y, int width, int height)
Draws an oval in the current color within a box at upper left corner x,y
With specified width and height in pixels
Use width = height to draw a circle
fillRect(int x, int y, int width, int height)
Fills a rectangle in the current color with upper left corner at x,y
With specified width and height in pixels
fillArc(int x, int y, int width, int height, int startAngle, int arcAngle)
Fills an arc in the current color at the coordinates and specified angle
There are many more, for a full list see
http://java.sun.com/j2se/1.3/docs/api/java/awt/Graphics.html
Here is an example using some of these functions to draw an ambivalent yellow face:
import java.applet.*;
import java.awt.*;
public class GraphicsTest extends Applet {
public void init() {
setBackground( Color.black );
}
public void paint( Graphics g ) {
g.setColor(Color.yellow);
g.fillOval(50,50,200,200);
g.setColor(new Color(255,0,0));
g.drawOval(100,100,20,10);
g.drawOval(175,100,20,10);
g.setColor(new Color(0,255,255));
g.fillRect(130,200,50,4);
}
}
This program draws the following image:
// Red eyes
// Green-Blue mouth
Can you figure out what the following code would do?
import java.applet.*;
import java.awt.*;
public class GraphicsTest extends Applet {
public void init() {
setBackground( Color.black );
}
public void paint( Graphics g ) {
int i;
i= 0;
while (i < 255) {
g.setColor(new Color(0,0,i));
g.drawLine(0,i,255,i);
i = i + 1;
}
}
}
If you’re not sure what this program will do, run it to find out!
NOTE: If you are developing a web applet and change the java source code, make sure
to save and recompile a new class file each time before trying to view your changes on
the web browser.
Your web browser may also cache old copies of the class. If you re-load the web page
and the old class is still there rather than your new class, then you need to throw out the
old copy of the class from the web browser before you can see the changes.
One way to throw out the old, cached copy, is to close your web browser and start it over.
This can be inconvenient if you are reloading frequently.
A better way is to open the Java console. There should be an icon for Java in the lower
right hand corner of the screen:
Double-click the icon to bring up the Java console. In the console, hit “x” to clear the
cache:
If you re-load the web page, the new class should be loaded and executed.
