Difference between revisions of "LibreOffice-Suite-Draw-6.3/C3/Editing-Curves-and-Polygons/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(One intermediate revision by the same user not shown)
Line 15: Line 15:
 
|| In this tutorial, you will learn how to,
 
|| In this tutorial, you will learn how to,
 
* Edit '''Curves '''and '''Polygons'''
 
* Edit '''Curves '''and '''Polygons'''
−
* Draw '''Beizer ''' curve
+
* Draw '''Bezier  curve'''
  
 
|-  
 
|-  
Line 23: Line 23:
 
|| This tutorial is recorded using,  
 
|| This tutorial is recorded using,  
  
−
* Ubuntu Linux OS version 18.04 and  
+
* '''Ubuntu Linux''' OS version 18.04 and  
−
* LibreOffice Suite version 6.3.5
+
* '''LibreOffice Suite''' version 6.3.5
−
 
+
  
 
|-  
 
|-  
Line 31: Line 30:
  
 
'''Prerequisites '''
 
'''Prerequisites '''
−
 
  
 
'''https://spoken-tutorial.org'''
 
'''https://spoken-tutorial.org'''
Line 48: Line 46:
 
* Please download and extract the file.
 
* Please download and extract the file.
 
* Make a copy and then use it for practising.
 
* Make a copy and then use it for practising.
−
 
  
 
|-  
 
|-  
 
|| Point to the '''Curves '''and '''Polygons '''in the drawing
 
|| Point to the '''Curves '''and '''Polygons '''in the drawing
−
|| we learnt how to draw '''curves '''and '''polygons.'''
+
|| We have learnt how to draw '''curves '''and '''polygons.'''
  
 
Now let us learn to edit them.
 
Now let us learn to edit them.
Line 74: Line 71:
  
 
Drag and drop the toolbar on the standard toolbar.
 
Drag and drop the toolbar on the standard toolbar.
−
|| Now let us enable the '''Edit Points''' toolbar.
+
|| Now let us enable the '''Edit Points toolbar'''.
  
−
Go to the '''View '''menu and select '''Toolbars'''.
+
Go to the '''View menu''' and select '''Toolbars'''.
  
−
From the submenu, select '''Edit Points'''.
+
From the '''sub-menu''', select '''Edit Points'''.
  
 
'''Edit Points toolbar''' appears on the '''Standard toolbar.'''
 
'''Edit Points toolbar''' appears on the '''Standard toolbar.'''
  
−
You can drag and place it at a convenient location on the '''standard tool bar.'''
+
You can drag and place it at a convenient location on the '''Standard tool bar.'''
  
 
|-  
 
|-  
 
|| Right-click on the shape, from the context menu select '''Points '''option.
 
|| Right-click on the shape, from the context menu select '''Points '''option.
−
|| Right-click on the '''school campus '''polygon.
+
|| Right-click on the '''School Campus '''polygon.
  
  
Line 119: Line 116:
 
|| Move to the '''Draw '''page.
 
|| Move to the '''Draw '''page.
  
−
You will see a '''plus''' sign for the '''cursor'''.
+
A '''plus''' sign for the '''cursor'''.
 
|| Move to the '''Draw '''page.
 
|| Move to the '''Draw '''page.
  
Line 125: Line 122:
 
|-  
 
|-  
 
|| Place this plus sign on the left side outline of the''' School Campus''' polygon.
 
|| Place this plus sign on the left side outline of the''' School Campus''' polygon.
−
|| Place this plus sign on the left of the''' School Campus '''polygon.
+
|| Place this '''plus sign''' on the left of the''' School Campus '''polygon.
  
 
|-  
 
|-  
Line 138: Line 135:
 
Then release the '''button'''.
 
Then release the '''button'''.
  
−
You have '''inserted '''a point.
+
You have '''inserted '''a '''point'''.
  
 
|-  
 
|-  
 
|| Click on the '''point '''that was '''inserted'''.
 
|| Click on the '''point '''that was '''inserted'''.
−
|| Now, click on the point that was '''inserted'''.
+
|| Now, click on the '''point''' that was '''inserted'''.
  
 
|-  
 
|-  
 
|| Point to all the edit point tools.
 
|| Point to all the edit point tools.
−
|| Observe that all the icons in the '''Edit Points''' toolbar are now enabled.
+
|| Observe that all the icons in the '''Edit Points toolbar''' are now enabled.
 
|-  
 
|-  
 
|| Go to '''Edit Points''' toolbar  '''Symmetric Transition.'''
 
|| Go to '''Edit Points''' toolbar  '''Symmetric Transition.'''
Line 153: Line 150:
 
|-  
 
|-  
 
|| Select the '''dotted '''control line.
 
|| Select the '''dotted '''control line.
−
|| A dotted line appears at the point.
+
|| A dotted line appears at the '''point'''.
  
 
Select the dotted control line on the object.  
 
Select the dotted control line on the object.  
Line 164: Line 161:
 
|-  
 
|-  
 
|| To exit, from the''' Edit Points '''toolbar, click anywhere on the page.
 
|| To exit, from the''' Edit Points '''toolbar, click anywhere on the page.
−
|| To exit, from the''' Edit Points '''toolbar, click anywhere on the page.
+
|| To exit, from the''' Edit Points toolbar''', click anywhere on the page.
  
 
|-  
 
|-  
Line 170: Line 167:
  
 
Point to the top right '''corner point'''.
 
Point to the top right '''corner point'''.
−
|| Now let’s elongate the '''school''' '''campus '''to the right side.
+
|| Now let’s elongate the '''School Campus '''to the right side.
  
 
Let us specifically move only the top right corner '''point.'''
 
Let us specifically move only the top right corner '''point.'''
Line 179: Line 176:
 
|-  
 
|-  
 
|| From the '''Edit Points''' toolbar  select '''Move '''points.
 
|| From the '''Edit Points''' toolbar  select '''Move '''points.
−
|| On the '''Edit Points '''toolbar, click '''Move points.'''
+
|| On the '''Edit Points toolbar''', click '''Move points.'''
  
 
|-  
 
|-  
Line 283: Line 280:
 
'''Bezier Curves'''
 
'''Bezier Curves'''
 
||  
 
||  
−
* '''Bezier Curves''' are used in mainly computer '''graphics '''to make curves''' '''smoother.  
+
* '''Bezier Curves''' are used in mainly '''computer graphics '''to make curves''' '''smoother.  
−
* You can use these curves to experiment with the shape and size of curves.
+
* You can use these '''curves''' to experiment with the shape and size of '''curves'''.
  
 
|-  
 
|-  
Line 291: Line 288:
 
'''Bezier Curves '''
 
'''Bezier Curves '''
  
−
|| All curves have a start point and an endpoint.
+
|| All '''curves''' have a start point and an end point.
  
−
The points on the curve''' '''are referred to as '''nodes.'''
+
The points on the '''curve''' are referred to as '''nodes.'''
 
|-  
 
|-  
 
|| Switch to the '''RouteMap '''file.
 
|| Switch to the '''RouteMap '''file.
Line 314: Line 311:
 
|| Keep the left mouse button pressed and drag till the '''PlayGround.'''
 
|| Keep the left mouse button pressed and drag till the '''PlayGround.'''
  
−
You will see a straight''' '''line.
+
You will see a straight line.
 
|-  
 
|-  
 
|| Release the '''mouse '''button
 
|| Release the '''mouse '''button
Line 330: Line 327:
 
|-  
 
|-  
 
|| Move the '''mouse '''over the curve to indicate the '''smoothness '''of the '''curve'''.
 
|| Move the '''mouse '''over the curve to indicate the '''smoothness '''of the '''curve'''.
−
|| We have drawn a curve!
+
|| We have drawn a '''curve'''!
  
 
Notice that the '''curve transition '''is smooth.
 
Notice that the '''curve transition '''is smooth.
 
|-  
 
|-  
 
|| Point to the Edit Points tool bar.
 
|| Point to the Edit Points tool bar.
−
|| Now let us edit the points on this curve''' '''using the '''Edit Points''' toolbar.
+
|| Now let us edit the '''points''' on this '''curve''' using the '''Edit Points toolbar'''.
−
|-
+
 
−
|| Click on the '''curve'''.
+
−
|| Click on the '''curve'''.
+
−
|-
+
−
|| Point to the end-points of the '''curve '''where the '''boxes '''are visible.
+
−
|| When the handles appear at the end-points of the curve, we can '''edit '''the '''curve'''.
+
 
|-  
 
|-  
 
|| Click on the start point of the '''curve'''.
 
|| Click on the start point of the '''curve'''.
Line 347: Line 339:
 
|-  
 
|-  
 
|| Drag so that the '''dotted line '''with a '''control '''point is shown.
 
|| Drag so that the '''dotted line '''with a '''control '''point is shown.
−
|| You will see a '''dotted line''' with a '''control '''point.
+
|| You will see a '''dotted line''' with a '''control point'''.
  
 
|-  
 
|-  
 
|| Drag the '''curve '''a little.
 
|| Drag the '''curve '''a little.
−
|| You can now drag the dotted line to reduce or expand the '''curve''', as required.
+
|| You can now drag the '''dotted line''' to reduce or expand the '''curve''', as required.
 
|-  
 
|-  
 
|| Double-click anywhere on the '''Draw '''page
 
|| Double-click anywhere on the '''Draw '''page
Line 364: Line 356:
  
  
−
|| Lastly, let us '''group '''all the objects in the map.
+
|| Lastly, let us '''group '''all the objects in the '''map'''.
  
  
−
Press '''Ctrl + A''' Keys on the keyboard to select all the objects.  
+
Press '''Ctrl + A''' keys on the keyboard to select all the objects.  
  
 
|-  
 
|-  
Line 378: Line 370:
 
Point to the objects.
 
Point to the objects.
  
−
|| From the main menu, select '''Shape'''.
+
|| From the '''main menu''', select '''Shape'''.
  
 
Then navigate to '''Group'''.
 
Then navigate to '''Group'''.
  
−
From the submenu select '''Group '''option.
+
From the sub-menu select '''Group '''option.
  
  
Line 390: Line 382:
 
|| Switch off the grid by clicking on the '''Display Grid '''icon.
 
|| Switch off the grid by clicking on the '''Display Grid '''icon.
  
−
Now look at the route map.
+
Now look at the '''route map'''.
 
|-  
 
|-  
 
|| Point to the '''routemap'''.
 
|| Point to the '''routemap'''.
Line 415: Line 407:
  
 
'''Summary'''
 
'''Summary'''
−
|| In this tutorial, you have learnt to,* Edit '''Curves '''and '''Polygons '''
+
|| In this tutorial, you have learnt to,
−
* Draw''' Beizer curve'''
+
* Edit '''curves '''and polygons
 +
* Draw''' Bezier curve'''
  
 
|-  
 
|-  
Line 429: Line 422:
 
Draw a '''Bezier curve'''
 
Draw a '''Bezier curve'''
  
−
Apply all the options from the '''Edit Points''' toolbar on it. <div style="margin-left:0.635cm;margin-right:0cm;"
+
Apply all the options from the '''Edit Points''' toolbar on it.  
 
|-  
 
|-  
 
|| '''Slide 10'''
 
|| '''Slide 10'''
Line 442: Line 435:
  
 
'''About Spoken Tutorial Project'''
 
'''About Spoken Tutorial Project'''
−
|| * The video at the following link summarises the Spoken Tutorial project.
+
||  
 +
* The video at the following link summarises the Spoken Tutorial project.
 
* Please download and watch it
 
* Please download and watch it
  
Line 449: Line 443:
  
 
'''Spoken tutorial workshops'''
 
'''Spoken tutorial workshops'''
−
|| * We conduct workshops using Spoken Tutorials and give certificates.
+
||  
 +
* We conduct workshops using Spoken Tutorials and give certificates.
 
* For more details, please contact us.
 
* For more details, please contact us.
  

Latest revision as of 21:09, 25 April 2021

Visual Cue Narration
Slide 1

Title Slide

Welcome to the spoken tutorial on Editing Curves and Polygons in LibreOffice Draw.
Slide 2

Learning Objectives

In this tutorial, you will learn how to,
  • Edit Curves and Polygons
  • Draw Bezier curve
Slide 3

System Requirements

This tutorial is recorded using,
  • Ubuntu Linux OS version 18.04 and
  • LibreOffice Suite version 6.3.5
Slide 4

Prerequisites

https://spoken-tutorial.org

To practise this tutorial, you should have basic knowledge of LibreOffice Draw.

If not, for relevant tutorials please visit this website.

Switch to RouteMap drawing Let us open our RouteMap drawing which we created in the previous tutorial.
Slide 5

Code Files

  • This file has been provided to you in the Code files link on this tutorial page.
  • Please download and extract the file.
  • Make a copy and then use it for practising.
Point to the Curves and Polygons in the drawing We have learnt how to draw curves and polygons.

Now let us learn to edit them.

Drag the zoom slider at the bottom of the interface to 100%. First let us zoom in for a better view.

Drag the zoom slider at the bottom of the interface to 100%.

Point to the “School Campus” shape in the drawing Let us now change the shape of the School Campus polygon.
Cursor on the Draw page. We will use the Edit Points toolbar to do this.
Go to the View menu and select Toolbars.

From the submenu select Edit Points.


Drag and drop the toolbar on the standard toolbar.

Now let us enable the Edit Points toolbar.

Go to the View menu and select Toolbars.

From the sub-menu, select Edit Points.

Edit Points toolbar appears on the Standard toolbar.

You can drag and place it at a convenient location on the Standard tool bar.

Right-click on the shape, from the context menu select Points option. Right-click on the School Campus polygon.


From the context menu select Points option if not already selected.

Point to the edit point. Click on the drawn polygon.

Then click on any one of the corner handles.

The edit point becomes visible.

In the top menu area, these icons become visible. All the point-related icons are enabled now.
Mouse-over on any one edit point Move the cursor on all the edit points.

The tooltip shows the name of the edit point.

Select the Convert to Curve option in the point-related icons at the top right Now select the Convert to Curve icon.
Press the right edit point drag to adjust the curve Click on the right edit point.

Drag the curve handle to adjust the curve as shown.

Click on the drop down on the Edit Points toolbar select Insert points option. Next select Insert Points icon from the Edit points toolbar.
Move to the Draw page.

A plus sign for the cursor.

Move to the Draw page.

The cursor will turn into a plus sign.

Place this plus sign on the left side outline of the School Campus polygon. Place this plus sign on the left of the School Campus polygon.
Press the left mouse button

Release the button.


Ensure you just added a point and did not change the shape in any way.

Press the left mouse button.

Then release the button.

You have inserted a point.

Click on the point that was inserted. Now, click on the point that was inserted.
Point to all the edit point tools. Observe that all the icons in the Edit Points toolbar are now enabled.
Go to Edit Points toolbar Symmetric Transition. Click on the Symmetric Transition icon.
Select the dotted control line. A dotted line appears at the point.

Select the dotted control line on the object.

Drag the control line to change the shape. Let’s drag the control line outwards to change the shape of the polygon.


The shape has changed!

To exit, from the Edit Points toolbar, click anywhere on the page. To exit, from the Edit Points toolbar, click anywhere on the page.
Point to the school campus.

Point to the top right corner point.

Now let’s elongate the School Campus to the right side.

Let us specifically move only the top right corner point.

Select the “School Campus” polygon. Select the School Campus polygon.
From the Edit Points toolbar select Move points. On the Edit Points toolbar, click Move points.
Drag the point a little to the right Now let’s drag the point to the right.
Point to the polygon. We have changed the shape of the polygon again!
Insert a text box at the top left side of the rectangle Let’s insert a text box and type the text School Main Gates inside it.

Drag and place it at the top of the polygon.

Point towards the side entrance on the RouteMap image slide Let’s also show the side entrance of the school.
Insert a text Text box.

Type the words School Side Entrance.

Let’s draw a Text box, and type School Side Entrance inside it.
Click anywhere on the page. Click anywhere on the page.
Point to the text box. Now let us rotate the text box.
Select the text box with the words School Side Entrance. Select the School Side Entrance text box.
Right-click for Context menu select Position and Size Right-click for the Context menu and select Position and Size option.
Point to the dialog box.

In the box click on the Rotation tab.

Position and Size dialog box appears.

In the box, click on the Rotation tab.

Click on the Rotation angle type 270 click on Ok button Change the Rotation angle to 270 and click on the OK button.
Drag the text box to the left edge of the rectangle Drag the text box to the left edge of the polygon.
Show map slide again Look at the reference map again.
Point to the arrows. The next step is to draw directions using arrows.
Click on the Fit slide to current window icon to see the whole page. Click on the Fit slide to current window icon to see the whole page.
From the Drawing toolbar click Line Ends with Arrow. From the Drawing toolbar, select Line Ends with Arrow.
Move to the Draw page and draw the arrow as shown. Let us move to the Draw page and draw the directions.
Point towards the arrows on the RouteMap image slide From the Home we have to turn right.

So click and drag the mouse to the right and then release it.

Point the direction with the mouse Then go down to the Residential Complex.
From the Drawing toolbar click Line Ends with Arrow.

Move to the Draw page and draw the arrow as shown.

Let’s draw another line to show this route.

Click, drag and release the mouse.

From the Drawing toolbar click Line Ends with Arrow.

Move to the Draw page and draw the arrow as shown.

Then at the Playground take the right turn and go down.
From the Drawing toolbar click Line Ends with Arrow.

Move to the Draw page and draw the arrow as shown.

Now go left and then down to reach the School Main gates.
From the Drawing toolbar click Line Ends with Arrow.

Drag the arrows to adjust the arrows.

Draw arrows to reach the School Side Entrance also.

Adjust the arrows if required.

Slide 6

Bezier Curves

Now let’s learn about Bezier Curves.
Slide 6

Bezier Curves

  • Bezier Curves are used in mainly computer graphics to make curves smoother.
  • You can use these curves to experiment with the shape and size of curves.
Slide 7

Bezier Curves

All curves have a start point and an end point.

The points on the curve are referred to as nodes.

Switch to the RouteMap file. Let us go back to our RouteMap file.
Point as per the narration Let's draw a Bezier curve to connect Home and Commercial Complex.
From the Drawing toolbar click Curve select Curve. From the Drawing toolbar, click on the drop down next to the Curve icon.

Then select Curve option.

Click once with your mouse. On the Draw page, click on the start point of the route - that is Home.
Keep the left mouse button pressed and drag straight

downward

Keep the left mouse button pressed and drag till the PlayGround.

You will see a straight line.

Release the mouse button

Move the pointer to the side entrance of the school.

Release the mouse button.


Now move the pointer to the Commercial Complex.

The line will curve as the mouse moves.

Double-click at the Commercial Complex Double-click at the end point, that is the Commercial Complex
Move the mouse over the curve to indicate the smoothness of the curve. We have drawn a curve!

Notice that the curve transition is smooth.

Point to the Edit Points tool bar. Now let us edit the points on this curve using the Edit Points toolbar.
Click on the start point of the curve. Click on the start point of the curve.
Drag so that the dotted line with a control point is shown. You will see a dotted line with a control point.
Drag the curve a little. You can now drag the dotted line to reduce or expand the curve, as required.
Double-click anywhere on the Draw page Double-click anywhere on the page, once you have made the change.
Cursor on the curve. We can insert, move or delete points to create a smoother curve.
Group all the objects in the map.

Press Ctrl + A Key the keyboard


Lastly, let us group all the objects in the map.


Press Ctrl + A keys on the keyboard to select all the objects.

Go to main menu, select Shape.

Navigate to to Group.

From the submenu select Group option.

Point to the objects.

From the main menu, select Shape.

Then navigate to Group.

From the sub-menu select Group option.


All the objects are grouped now.

Click on the Display Grid icon. Switch off the grid by clicking on the Display Grid icon.

Now look at the route map.

Point to the routemap. You can also
  • colour the buildings,
  • add roads using lines,
  • add traffic signals and
  • any other detail you require.
Display the sample coloured RouteMap. Here is our sample coloured RouteMap.
Press Ctrl + S to save the file Let us save all the changes made and close the file.
Only Narration This brings us to the end of this tutorial.

Let us summarise.

Slide 8

Summary

In this tutorial, you have learnt to,
  • Edit curves and polygons
  • Draw Bezier curve
Slide 9

Assignment


Here is an assignment for you.


Draw a Bezier curve

Apply all the options from the Edit Points toolbar on it.

Slide 10

Assignment

Here is another assignment for you.

Create the map shown on this slide on your own.

Slide 11

About Spoken Tutorial Project

  • The video at the following link summarises the Spoken Tutorial project.
  • Please download and watch it
Slide 12

Spoken tutorial workshops

  • We conduct workshops using Spoken Tutorials and give certificates.
  • For more details, please contact us.
Slide 13

Forums

Please post your timed queries in this forum.
Slide 14

Acknowledgement

The Spoken Tutorial project is funded by the Ministry of Education, Govt. of India.
Slide 15

Thank you

This tutorial was originally contributed by DesiCrew Solutions Pvt. Ltd.


This tutorial is contributed by Nikita Misal and Madhuri Ganapathi from IIT Bombay.

Thank you for watching.

Contributors and Content Editors

Madhurig, Nancyvarkey

Retrieved from "https://script.spoken-tutorial.org/index.php?title=LibreOffice-Suite-Draw-6.3/C3/Editing-Curves-and-Polygons/English&oldid=55034"