Program 6 - Transformations

Goal Description Hints Passoff

Due Date - Dec 9

Goal

 
Allow users to interactively manipulate nested pictures by translating, scaling, and rotating.
CS 456
Description
 

1. Augment your model from program 5 with a "file" entry and a "bounds" entry. A "file" is a reference to another picture file with associated translate, scale and rotate parameters. A "bounds" entry establishes the width and height of a picture so that when the picture is embedded in other pictures, the bounds are known.

File Format

Add the following two types of lines to your file format.
  • bounds - "B" <width> <height>
    • There should be only one such entry and it should be the first entry in the file.
  • file - "F" <fileName in quotes> <transX> <transY> <scaleX> <scaleY> <rotateRadians>
    • This is defines a drawing of the named picture file after first scaling the picture in X and Y about its upper left corner, then rotating it (about the upper left corner) and then translating its upper left corner to the specified location.

There are no quotes around the "B" and the "F" in the data file.

The model should be updated to support setting and getting of the bounds of a picture and to support adding, deleting and modifying embedded references to other picture files. Essentially this means adding the information in the above file into your model.

2. Modify your drawing view to enable setting of the bounds of the picture as shown below. There is a single control point "B" that will set the bounds. TransformWhile dragging this control point the bounding rectangle should always be updated. When the drag is complete, all views of this picture should reflect the new drag position, including any text views and any embedded views of this picture in other pictures.

3. Add a fifth button "F" to your column of buttons. When this button is pressed you should open the file chooser and select another picture file for embedding in this picture file. The new embedded picture should appear selected in the center of this picture and it should be scaled to about 50% of the size of the picture it is embedded into. The requirement is to place the picture in to another picture. Exact placement is not important because the user can drag the picture to its desired location and size.

Embedding should work up to an arbitrary number of levels of pictures within pictures but you need not check for or support a picture being directly or indirectly embedded within itself.

4. When you embed a picture using the F button that picture should appear selected and should show its three control points as specified in item 6.

5. An embedded picture can be selected while in select mode by clicking anywhere within its bounds. Remember that its bounds may be rotated, which is slightly more complicated than simple rectangle selection. It is not possible to select pictures embedded within pictures that are embedded within pictures. Only one level of selection is possible.

6. When an embedded picture is selected, it is shown as in the figure with a bounding box and the three control points. When not selected the bounding box and control points will disappear. The drawing of the bounding box is determined from the bounds of the picture being embedded.

Dragging the "T" control will translate the picture around inside of its host picture. Dragging the "R" control will cause the embedded picture to be rotated about the upper left corner. When a selected picture is rotated, its bounding box and control points should reflect that rotation. Dragging the "S" control will scale the embedded picture. The center of scaling is the upper left corner of the bounding box. None of the primitive objects inside of an embedded picture can be selected or manipulated, only the embedding as a whole. To manipulate the primitive lines and ellipses one should go back to the original picture to make those changes. There is NO clipping to the bounds of a picture. Objects drawn outside of the bounds of an embedded picture cannot be selected.

7. Any change to a picture should cause an update to any other picture that embeds that picture either directly or indirectly. This includes any change to the Bounds within a picture that is embedded elsewhere. (Hint: make each picture a listener on any pictures that it embeds and forward all notifications to any listeners on that picture).

Hints
 
Passoff
 
__  1) Bounds for a picture can be set by dragging the "B" point around the picture. This is not resizing the component it is just dragging "B". The new "B" entry should change in your text views of pictures.

__  2) Choosing the F button will open the file chooser and embed another picture file into this one.
__ 3) Embedding picture A into picture B and then picture B into picture C will show a correct display of picture A in C.
__ 3) Changing picture A (see above) will cause those changes to appear in pictures B and C.
__ 1) Selection of an embedded picture works correctly for unrotated pictures and the correct bounds and control points appear.
__ 2) Translation works correctly when dragging T for an embedded picture.
__ 1) Scaling works correctly when the embedded picture is not rotated.
__ 2) Rotation works correctly
__ 1) Scaling works correctly on rotated pictures
__ 1) Selection works correctly on rotated bounding boxes.