This lab exercise will give you practice working with Java 2D graphics.
You will create a component that behaves like:
Lab requirements are divided between the ellipse and slider
combination and the circles and button combination.
- The ellipse is 200 × 100 pixels in size
- The ellipse is drawn with a stroke width of 5 pixels
- The slider's value can range from 0 to 360
- The slider's initial value is 0
- As the slider's value changes, a red arc, whose angle corresponds to
the slider's value, is filled in the interior of the ellipse
- The two circles are 50 pixels in diameter
- The circles are situated 100 pixels apart at their
closest point
- If the mouse is pressed within the left circle and dragged,
a "rubber band" is drawn from the point where the mouse is
pressed to the mouse's current location
- When the mouse is released the rubber band disappears
- If the mouse is released within the right circle, an edge
is drawn between the two circles at their closest point
- While the edge exists between the circles, subsequent mouse
dragging is ignored
- Clicking the RESET button removes the edge
- The circles, rubber band, and edge are drawn with a stroke
width of 3 pixels
The zipped NetBeans project to use for this lab is here:
CS_2511_Graphics.zip.
Unzip the project folder and open the
resulting
CS_2511_Graphics project in NetBeans.
Run the
JavaGraphics.java class. It should produce a frame like that
below. You will complete the application by producing
the graphical objects and adding listeners to the slider and button.
The component layout is provided by the
JavaGraphics class,
which is complete except for the slider and button listeners.
The
JavaGraphics class contains two inner classes that are
responsible for the layout of two sub-panels:
- ArcPanel: contains the ellipse/arc component and the
associated slider
- MousePanel: contains the mouse-sensitive circles and the
associated button
ArcPanel and
MousePanel depend on the
ArcCanvas
and
MouseCanvas classes, respectively, whose skeletal forms are
provided for you to complete.
ArcCanvas and
MouseCanvas are responsible for
constructing and drawing the required graphical objects.
For the basic techniques behind Java 2D graphics be sure you understand
the
CarMover and
SceneEditor examples in our text on
pages 223—239, and in the lecture notes beginning here:
Graphic Programming with Inheritance
Specific hints and suggestions are divided between the
ellipse and
slider combination and the
circles and button combination.
- The drawing of the elliptical object can be accomplished through
an Ellipse2D.Double and Arc2D.Double combination:
- Both classes are in java.awt.geom
- An arc is a partial section of a full ellipse defined by a
start angle and an angular extent (arc length)
- A full arc (same as an ellipse) can be drawn by giving it a
start angle of 0 and an angular extent of 360
- A partial arc in our demonstration is displayed using the
closure type Arc2D.PIE
- First use the arc to fill with red
- Then use the ellipse to draw the black border
- Use the Graphics2D.setStroke method
together with the BasicStroke class to change the width of
the pen when drawing:
- Both Graphics2D and BasicStroke are
in java.awt
- The slider's change listener must have access to the arc so that
it can change its angular extent while the slider moves
- The "rubber banding" effect is achieved by saving the start
point of the rubber band when the mouse is pressed and then drawing
a Line2D.Double object between the start point and end point
as the mouse is dragged
- The start point is obtained by calling getPoint on
the MouseEvent object passed to the mousePressed
method
- The end point is obtained by doing the same thing in
the mouseDragged method
- Don't forget to call repaint when the mouse is
dragged
- The rubber band is drawn only when the mouse is initially
pressed in the left circle. Use the Ellipse2D.contains
method to perform hit testing in the circle.
- Similarly, the connecting edge between the circles is drawn only
when the mouse is released in the right circle. Again,
use contains to check for this in mouseReleased.
- Be sure to repaint in mouseReleased, to draw the
connecting edge if necessary and to remove the rubber band
- The reset button's action listener must have a way to tell
the MouseCanvas object to remove the circles' connecting edge
if it exists
When finished, zip your project folder as
your-login-LEX7.zip.
Email the zip file to your TA.
- Correct arc panel appearance and behavior: 4 points
- Correct mouse panel appearance and behavior: 6 points