A3: Widgets & Layout
Bezier Curve
In this assignment you will implement a curve drawing tool in Java/Java FX, which is usually supported in vector-drawing software such as InkScape, Figma, and Adobe Illustrator. Specially, your program will allow a user to draw cubic Bezier curves (https://en.wikipedia.org/wiki/B%C3%A9zier_curve) on a canvas, edit the shape of the curves, and set their properties.
A segment of a cubic Bezier curve is a parametric curve of degree 3, which is determined by a start point, an end point, and two control points. A complicated Bezier curve consists of multiple curve segments, where the end point of the previous segment becomes the start point of the next segment. The rst example below shows a simple cubic Bezier curve with just one segment. Any points on a curve can be either smooth or sharp. A smooth point has a control point; and a sharp point simply has its control point overlapped with itself. For a connecting point of two curve segments, a smooth connection sets the second control point of the previous segment and the rst control point of the next segment always on the same line toward the opposite direction, with respect to the joining point. In contrast, a sharp connection does not require this, having the two control points overlapped with the curve point. The second and third examples below show these two types of connection. Fortunately, you do not need to do the math; Java FX has a handy class named CubicCurve (https://openjfx.io/javadoc/15/javafx.graphics/javafx/scene/shape/CubicCurve.html) to do the work for drawing one curve segment.
Below is a rough mockup that illustrates the features that you will implement, and the basic layout that you must use.
Functional Requirements
The main area of your program is a canvas where users can draw Bezier curves. Users can select a pen tool from the list on the side and then use their mouse to draw that a Bezier curve on the canvas. Users can also choose a selection tool to edit the shape of a curve by changing its segment points (i.e., points on the curve) and control points. Additionally, users can specify the colour, line thickness, and style of a selected curve and these properties of a new curve to draw.
Your drawing program will have the following layout and features: A menu bar containing the following menus and menu items:
File:
New: create a new blank drawing (and prompt the user to save if the current drawing is unsaved).
Load: load a drawing that you previously saved (also prompt the user before discarding a drawing) and allow the user to continue editing the drawing.
Save: save the current drawing using a le format that you determine (in vector graphics, i.e., not images).
Quit: exit the application (prompt the user to save before exiting). Help:
About: display a dialogbox with your program name, your name and WatID.
A tool palette on the left-hand side, with the following tools:
A pen tool allows the user to enter a curve drawing mode. To draw a curve, the user should rst click this tool, then click somewhere on the canvas to de ne the start point, click somewhere again to de ne the end point of this curve segment (which is also the start point of the next curve segment), and keep clicking somewhere to de ne the start/end point for following curve segments.
For each curve segment, two control points will be automatically inserted (with some default/random distance and direction with respect to the segment point). These segment points and control points should be shown with some visual indication (e.g., a
small circle/square). To exit the drawing mode, the user should press ESC on the keyboard.
A selection tool allows the user to select a curve that has been drawn and enter a curve editing mode. To select a curve, the user should click this tool, then click on an existing curve, resulting in some visual indication to the curve itself to indicate that its been selected. Once a curve is selected, its segment and control points should be shown with some visual indication (e.g., a bounding box roughly covering the curve or a change of the color). The user could then drag these segment and control points with their mouse to change the shape of the curve.
Selecting a curve will cause the colour palette, line thickness and style to update their state to re ect the currently selected curve (e.g. if the user selects a red curve with the largest line thickness, the colour palette should change to red, and the line thickness should change to the largest line to match the selected curve). Changing colour, line thickness, or line style when a curve is selected will update the curve to the new values. Pressing ESC on the keyboard will clear curve selection.
A point type tool allows the user to change the type of any segment point between smooth and sharp. Once a curve is selected so that the segment and control points reveal, the user could click any segment point on the curve to switch its type between smooth and sharp. Di erent type of segment point should have di erent visual indication, such as color. When drawing a curve, the point type can be set to a default value: smooth.
An erase tool allows the user to remove a curve. To do so, the user should click on this tool and then click on a curve to remove it. Pressing DEL while a curve is selected should also delete that selected curve.
A line colour icon that graphically displays the currently selected line colour. Clicking on this icon will bring up a color chooser dialog that lets the user pick a color. This colour will be used as the line colour for any new curves that are drawn.
A line thickness palette: a graphical display of at least three line widths that the user can select. Selecting a line width will set the line thickness for any new curves drawn.
A line style palette: a graphical display of solid or dotted lines with at least three choices. Selecting a line style will set the line style for any new curves that are drawn.
The following functionality should be supported:
Curve drawing: The user draws a Bezier curve by using the pen tool, and clicking on the canvas where they want to start drawing it. The rst click sets the start point of a curve and subsequent clicks set the later segment points (i.e., intermediate curve points or the end point). A “preview” of the curve segment being drawn should be shown as the mouse is moving. Pressing ESC completes the drawing of the curve.
Curve editing: The user should be able to select any curve and edit its shape by dragging any of the segment and control points with the mouse, as well as changing the type (smooth or sharp) of any segment points. While in practice curves can overlap, for simplicity, you can assume that users do not draw intersecting curves. However, your program should clearly indicate which curve, if any, is selected. When a curve is selected, the drawing properties of the interface should also change to re ect the properties of the curve.
Property editing: Changing the drawing properties (e.g., colour, line style) of a selected curve should change that curve’s properties.
Window resizing: Your application should support dynamic resizing of the application window, so that the application adapts to di erent window sizes and resolutions. If you change the size of the window, the canvas should scale to the size of the window, but the shapes should stay at the same size and position. The exact implementation is a visual design
decision left to you, but the application and all functionality should be equally usable at all resolutions. You should set “reasonable” minimum and maximum sizes for your application window (e.g. range from 640×480 to 1920×1440). You can decide on the exact range but the minimum size must be smaller than 1920×1080 and aslo make sure that it clearly demonstrates a change in layout.
Hint: Using subclasses of the JavaFX Shape (https://openjfx.io/javadoc/15/javafx.graphics/javafx/scene/shape/Shape.html) and the property binding (https://openjfx.io/javadoc/15/javafx.base/javafx/beans/property/Property.html) mechanism might be more convenient for implementing the rendering and coordinating the interactions among multiple shapes.
In all cases, your UI should disable controls when they are not appropriate (e.g. if no curve is selected and you click on the selection tool, the drawing property tools should be disabled since they don’t apply. Once you select a shape, they would then be enabled and changed to the properties for that curve).
Here is a comprehensive tutorial (https://www.youtube.com/watch?v=4dI4lD3ievI) about the pen tool and relevant functionality in InkScape (https://inkscape.org/), if you are unfamiliar with the user interactions of a drawing tool. This video covers many advanced features, including some below, but you are not required to implement the features not described in this assignment. This video is to give you a avour of the Bezier curve tool in a real product. You can also experience the Bezier curve tool by yourself via downloading the free InkScape software.
Choose Your Own Feature! (Select one or more features to implement from the list below, up to 10 marks).
Advanced drawing (10 marks): the ability to set the control points while drawing the curve segments. To do so, the user should rst click somewhere to set the position of the segment point, then drag the mouse to set the control point(s) associated with this segment point, and release the mouse to complete drawing the point. Similarly, the user could keep clicking and dragging to de ne subsequent segment points with their control points. This is how the Bezier tool actually works in most vector-drawing software.
Add and remove points (10 marks): the ability to add (5 marks) or remove (5 marks) a selected segment point on a curve. This also include adding the functionality on the tool palette.
Curve transformation (10 marks): the ability to move (4 marks), scale (3 marks), and rotate (3 marks) any curve by selecting it. This requires using a graphical widget (e.g., a bounding box of the selected curve) to perform the transformation in real time (i.e., direct manipulation). For example, to scale a curve, the user should grab a corner of the widget and drag it to increase/decrease the size.
Zoom and pan (10 marks): the ability for zooming the canvas in and out, scaling the contents, and showing scrollbars as needed. This also requires the ability to pan around the screen if it is zoomed in larger than the viewport (i.e. if you have scrollbars).
Cut-copy-paste (10 marks): allowing users to cut, copy, and paste curves within your application (e.g. to create a copy of a curve). This includes adding standard Edit-Cut, Edit-Copy, Edit-Paste menu items. If a curve is copy-pasted, the new copy should be fully interactive, just as if it had been drawn. You do NOT need to support pasting from an external application.
Undo-Redo (10 marks): allowing users to undo the last action (5 marks) or have a full implementation that lets them undo-redo multiple steps. This also includes adding the functionality under Edit-Undo and Edit-Redo menu items.
Technical Requirements
The following is a list of technical constraints and guidelines:
The assignment must be programmed using only Java 11 and Java FX 11 libraries. You should not use Swing.
The starting application window should be no larger than 1600×1200. The window should be resizable, as described above.
Appropriate widgets should be selected and used for the interface. Options should appropriately enabled/disabled in the UI (i.e. if an option is unavailable, it should be disabled).
You may use third-party graphics/images, provided that (a) they are licensed to allow you to use them in this way (e.g. Creative Commons), and (b) you comment their origin and license in your README le.
You may use any sample code provided in-class (including on the class repository). If you do this, you must provide a comment in the code indicating the source of the code. If you use and fail to disclose this information, it could be considered an academic violation. You may not use any other third-party code unless you obtain instructor consent ahead of time.
Submission
Your directory structure for your assignment submission should be in subdirectories under your a3/ directory in your Git repository. It should use a standard le layout for a Gradle project. For
example, your submission should resemble this (likely with slightly di erent class, image and sound le names). Note that you should NOT include the contents of the out/ folder (since they will be replaced when we build your project). Also, your project may or may not include a3.iml depending on whether you used IntelliJ.
a3/
©À©¤©¤ a3.iml
©À©¤©¤ build/
©À©¤©¤ build.gradle
©À©¤©¤ gradle/
©À©¤©¤ gradlew
©À©¤©¤ gradlew.bat
©À©¤©¤ readme.md
©À©¤©¤ settings.gradle
©¸©¤©¤ src/
©¸©¤©¤ main
©¸©¤©¤ java
©À©¤©¤ CanvasView.java
©À©¤©¤ Model.java
©À©¤©¤ BezierTool.java
©¸©¤©¤ ToolbarView.java
©¸©¤©¤ resources
©À©¤©¤ selection.jpg
©À©¤©¤ erase.jpg
©¸©¤©¤ pen.jpg
Your submission needs to include:
All source code and resources required to build and execute your program.
A Gradle project that compiles (‘gradle build’) and runs your project (‘gradle run’).
A `readme.md’ le with any details required to help the TA grade your assignment.