Shape Demonstration: a graphics editor

  1. Wait for the program to load. There are nine buttons at the top of the gray box.
  2. Click on the Rect button.
  3. Move the mouse pointer to the center of the gray area.
  4. Drag a diagonal line with the mouse to create a red rectangle .
  5. Click the Select button, then move the shape by dragging it.

See the complete instructions below.

Editor Buttons

Select

Move shapes by dragging them.

Select shapes by clicking on them or by dragging an area (a marquee) around the shapes.

Add or remove a shape from the selection by holding the Control key down while you click on the shape.

The shapes that are selected display their handles when you release the mouse button. Dragging a handle will resize rectangular shapes and move the points in lines and polygons.

The rounded rectangle has an additional handle for controlling the roundness of its corners. The top left corner of the rectangle and the fifth handle form an ellipse. That ellipse defines the rounded edges of the rectangle.

The arc has two additional handles. They control the start and end angles of the arc.

Deselect all objects by clicking on the background.

Delete

The currently selected shapes are removed from the drawing.

Z Order

Z Order controls the front to back orientation of shapes. You will see this effect only when shapes overlap.

Click on a shape to move it to the front.

Right-click (or meta-click) to move it to the back.

Rect, RndRect, Arc and Oval

These buttons create rectangles, rounded rectangles, arcs and ovals.

The cursor changes to a crosshair. Create a shape by dragging an area on the drawing. New shapes are generated until you select another function.

Line

A line is drawn by dragging the crosshair cursor from a start point to the end point. New lines are drawn until you select another function.

Poly

Polygons are generated by dragging line segments. A new line segment is created with each drag.

Stop adding segments by clicking on the Poly button again. Actually, any button except Delete will stop the process.

Problem reports

If you experience problems with the operation of this program, I'd like to hear about it. Please send me a note describing the situation including the type of computer, operating system and browser.

Known problems

In Select mode, the marquee is visible only when dragging from top left to bottom right. Fixed.

The handles are clipped (too small) after releasing a moving shape. This happens on some systems. Fixed.

Horizontal and vertical lines will not drag and cannot be selected by clicking. You can select them by dragging a marquee around them. You can move them by moving the handles. Fixed.

Application Source

This is the TestApp.java source code. It shows how the applet is setup and how the framework simplifies a graphic application. The SelectionTool handles most of the onscreen action in this demo. Sorry, the source to the framework is not included. If you are interested in licensing information, please inquire within.

Stay tuned for more fun with the shapes graphic framework. The latest revision fixes all of the known problems and adds several improvements. The rounded rectangle has a handle for controlling the roundness of the corners. The arc has handles that adjust the starting and ending angles. The line has a more sophisticated hit test that computes the distance between the cursor and the line segment. A hit is registered when that distance is within few pixels.

Coming up soon are text shapes and a way to change the colors.

If you'd like to discuss a potential application or if you would like more information, please drop me a line.

Steve Murtha (steve@simtools.com)


Copyright © 1997, 1998 by Simulation Tools ® All Rights Reserved.