Project 4 — Vector Graphics Editor
Requirements (150 points)
Requirements (150 points)
Your task is to implement an environment that allows the drawing and manipulation of simple vector shapes (rectangles, ellipses, and polygons). Your application will also allow users to save their work as images or as raw vector shape data.
User Interface
Because the feature set of this application is richer than in previous assignments, the quality and design of the UI has greater importance. At the same time, you have more flexibility in how you want to design the UI so that the user will be able to most effectively use your application. There are a few requirements that your UI must satisfy:
- There must be a menu bar with the File and Help menus. There should be an About item under Help that opens an About Box for your application.
- You should replace the default icons.
- Your window should be resizable and should reposition the controls in a nice and useful way. You can impose a maximum window size if you wish.
- The UI should expose all of the features specified below.
Functionality
The drawing canvas should be resizable, but you can set its maximum size to 640x480. When the window is resized so that the entire drawing canvas cannot be seen, scrollbars should allow the user to access the entire canvas. Consider using a picture box as the canvas and placing in its own panel. Look into the AutoScroll and related properties of the panel to support scrolling when the window is resized. All drawing to the canvas should be done using GDI+.
The editor should allow the user to draw rectangles, ellipses, and polygons using the mouse. For rectangles, the user will click, drag the mouse, and release, and the locations of the mouse down and mouse up events specify the bounding box for the rectangle to be drawn. Drawing an ellipse works the same, where this is the bounding box that contains the ellipse to be drawn. To draw a polygon, the user will click successive points on the canvas. The user will press the Escape key to stop adding points to the new polygon.
For each shape drawn, the user should be able to set properties for the stroke and fill. The user must be able to choose to enable or disable both stroke and fill for the shape being drawn. For stroke, the color and width of the stroke must be configurable. For fill, the color must be configurable. Use the built-in ColorDialog to allow the user to choose these colors.
There must be a display on the UI that lists all the shapes that have been drawn to the canvas. The order of shapes in this list should correspond to the z-order of the shapes (ie, the shapes that were drawn first can be hidden by shapes that are drawn on top of them later). The user should also have a way of changing the order of shapes in this list so that the z-orders of the shapes can be changed. When a shape in the list is selected, the u key should move it up in the list, i should move it down.
When a shape is selected in the list, its stroke and fill properties should also be modifiable.
We also want to allow modifications to the shapes that have been drawn. We will support this with keyboard input. When a shape in the list is selected, support the following translation operations:
- h should move it left
- j should move it up
- k should move it down
- l should move it right
- q should stretch it horizontally
- a should shrink it horizontally
- w should stretch it vertically
- s should shrink it vertically
- e should stretch it in both directions
- d should shrink it in both directions
Allow the user to save his work either as an image or just the raw shape data to be reloaded later. To save the canvas as an image, look into the Save() method of the Image class. To save the raw shape data, use serialization on your shape objects and then write them out to a file with a .shapes extension. Use a SaveFileDialog to allow the user to choose where to save. Also allow the user to open an existing .shapes file using an OpenFileDialog. Also issue appropriate warnings if the user is about to close the application without saving, create a new canvas with a saving, etc.
Advanced Features
You must implement one of the following:
- Allow the user to zoom in/out. The user should be able to edit the canvas no matter what the current zoom state is. You can choose fixed zoom increments (like 50, 75, 125, 150) or allow the user to choose any zoom in a given range.
- In addition to selecting shapes only by clicking on them in the list of shapes, it would be nice to be able to click directly on the canvas to select the topmost shape at the point of the mouse click. Allow the user select shapes in this manner. When a shape is selected, the appropriate shape should become highlighted in the list. For all shapes, you can assume that clicking within the bounding box of the shape is the same as clicking inside the shape. (If you can do better than this, great!).
Extra Credit (10 points)
Implement both of the advanced features.
Sample
Here is a sample vector graphics editor. This sample is not feature-complete but does provide a general idea of how your application should behave. Yours must, of course, implement the specification as described, but you have the freedom to design the interface in a way that you think will be useful to the user.