Copiez et collez votre devoir ici
1. Introduction This assignment asks you to modify a JavaScript drawing program to add functionality. The code to modify can be found on the course's Moodle site: · SimpleDraw-js.html : Starting code for drawing ink lines and erasing the canvas. · SimpleDraw-js-withRadioButtons.html : Slightly modified version including the three radio buttons requested in Modification 1 (see Section 2.1). Only the “Draw” button is functional. · SimpleDraw-js-withRadioButtons_radial_menu.html : Modified version including the three radio buttons requested in Modification 1 and a radial menu to modify in Modification 5 (see Section 2.2) 2. Work requested You need to make two changes to the code. The first modification (Modification 1) is mandatory. The second modification must be chosen from three options (Modifications 2 to 5 ). The videos below demonstrate all of the possible modifications. You must watch these videos in order to fully understand the requested changes, otherwise you could lose points! Please watch videos: Presentation of possible modifications https://www.youtube.com/watch?v=EEP7yIvaW6A&t=1s Presentation of the color palette https://www.youtube.com/watch?v=oX6a67bu0lY&feature=emb_title Presentation of modification # 5 use The right button on a mouse to display the radial menuhttps://www.youtube.com/watch?v=lkU39V1qOAI&feature=emb_title 2.1 Mandatory modification You need to make this change: Modification 1: Add functions for rectangle selection and selection displacement · Add three radio buttons: one for “Draw”, one for “Rectangle Selection”, and one for “Move Selection”. The “Draw” button should be selected initially. · When the “Draw” button is selected, dragging the mouse should draw an ink stroke, as in the original code. · When the “Select in rectangle” button is selected, the user should be able to drag to select all ink strokes in the rectangle between the start point and the end point of the drag. Only lines that are entirely within the rectangle should be selected. Visual feedback should show the rectangle during the drag, and thereafter another visual feedback should show the ink strokes selected upon release. Each time the user makes a rectangle selection, the previously selected lines must be deselected by the system to allow the user to start a new selection from zero. · When the "Move Selection" button is selected, dragging by the user should move all selected lines the same distance and in the same direction as the mouse cursor. · If you press "Move Selection" and drag while no line is selected, there should be no error. · Add a line color choice using new buttons in the HTML interface. A choice of color should ensure that the lines are drawn with the selected color. Lines already drawn should not be affected by this change. It is therefore necessary to modify the code in order to add a color attribute to the different lines. 2.2 Choice of modification You must make ONE of the following changes: Modification 2: Add a function to delete · Add a “Delete” radio button. When this button is selected, you must draw a circle with a radius of 30 pixels around the cursor following the cursor, and allow the user to drag. When dragging with the mouse button pressed, you must erase any line that touches the circle of the eraser. The circle with a radius of 30 pixels should remain visible and follow the cursor before, during, and after each drag. Once the user selects another radio button to exit “Clear” mode, the circle should no longer be displayed. Modification 3: Add a symmetry feature · Add a checkbox to activate a “Symmetry” mode. When the “Draw” radio button is selected, and the “Symmetry” box is checked, any new line drawn should create (at the same time as its dragging) a second line reflected around a vertical axis passing through the middle of the canvas. Modification 4: Add functions to delete and copy the selection · Add a "Delete" button which deletes the selected lines. · Also add a "Copy" button which creates a copy of all the selected lines; this copy should appear shifted 30 pixels to the right and 30 pixels below the original lines. The original strokes should no longer be selected, and the new strokes should now be selected, thus allowing the user to repeatedly press the "Copy" button to create multiple copies, each offset from the last. · If you press "Delete" or "Copy" when no line is selected, there should be no error. Modification 5: Changes z the radial menu for faster selection · Use the SimpleDraw-withRadioButtons_radial_menu.html starter script · Modify the radial menu that is displayed using the right mouse click, so that an option is selected when the mouse is released rather than requiring an additional click as is the case with fault. Thus, this modification would increase the efficiency of the user by making it possible to select an option more quickly: 1. the right mouse button is pressed to display the menu; 2. keep the button pressed; 3. we slide in the direction of the desired option; 4. release to select the option. 3. Report You must answer in a short report (maximum 1 page) the following questions: · Describe the key tasks supported by the application; · Explain how the interface supports these key tasks; · What improvement (s) could be made to improve the interface of this application? Explain the benefits. Draw Rectangle Select Move Selection Delete All Clear Draw Rectangle Select Move Selection Delete All