Edit geometries

Review of editing actions on element geometries
This category contains 15 showcases

Play all Edit geometries showcases continuously

Align elements
Shows how to align elements
Align elements 

Showcase steps

  1. Select elements to align.
  2. Click Top icon in Selection / Align sub-menu to align elements to the top border.
  3. Click Horizontal icon in Selection / Distribute equally sub-menuto move elements to have identical space between them along x axis.
Play
Close paths
Shows how to close a path
Close paths 

Showcase steps

  1. Select path to close
  2. Click Open path segments tasksto launch the close path task
  3. Click Close path
Play
Cut and merge paths
Shows how to cut and merge paths
Cut and merge paths 

Showcase steps

  1. Select path to cut
  2. Click show path segments tasksto use the cut task
  3. Click cut path icon
  4. Click on the cut point of the path
  5. Move the splitted path
  6. Select the two paths to merge
  7. Click merge paths icon
  8. Click on the merge point
  9. Move the merged path
Play
Edit geometry properties
Editing geometry properties for each type of object (rectangle, circle, ellipse, image, line, polyline, path, polygon)
Edit geometry properties 

Showcase steps

  1. Select rectangle
  2. Edit properties
  3. Select Geometry tab.Edit (x, y, w, h, rx, ry) properties
  4. Set rx/ry properties for rounded corners
  5. Click close
  6. Select circle
  7. Edit (cx, cy, r) properties
  8. Select ellipse
  9. Edit (rx, ry, cx, cy) properties
  10. Select image
  11. Edit (x, y, w, h) properties
  12. Select line
  13. Edit (x1, y1, x2, y2) properties
  14. Select polyline
  15. Edit (x,y) points
  16. Select path
  17. Edit commandsfix decimals,transform to relative/absolute
  18. Click fix decimals
  19. Enter decimal count
  20. Click OK
  21. Click close
  22. Select polygon
  23. Edit (x,y) pointsfix decimals
Play
Edit huge path
Edit the geometry of a path with a lot of points
Edit huge path 

Showcase steps

  1. Open a document that contains an huge path
  2. Using a drawsvg sample extracted from Freesvg
  3. Click Load
  4. Disable highlighting selection mode
  5. Browse the document
  6. The document contains only one path.Resulting of a scanning
  7. Click on the path to edit points
  8. Only points near the clicked one can be movedClick near another one
  9. Move a selected point
  10. Change path fill color
Play
Edit path properties
Shows how to edit path properties.
• Change data, transform absolute to relative mode, modify decimals count.
• Optimize path description length.
• Edit the full text path description.
Edit path properties 

Showcase steps

  1. Select path
  2. Edit path properties
  3. Select Geometry tab
  4. The panel shows path commands and arguments. Arguments can be changed. Click update to apply changes. Modify the accuracy by setting the decimals count.The path commands can be transformed from absolute to relative mode and vice-versa. Edit the full text path description.
  5. Click fix decimals
  6. Enter decimals count
  7. Click OK
  8. Click transform to absolute
  9. Click transform to relative
  10. Click close
  11. Click edit
  12. Change path description
  13. Click close
Play
Edit path segments
Change the structure of a path
Insert segments, change segments types and delete segments
Edit path segments 

Showcase steps

  1. Select path to move its points
  2. Click Move points
  3. Select path to insert new segments
  4. Click Open path segments to show tasks and start the insert task
  5. Click Insert segments
  6. Click the blue point middle of a segmentto split it in two segments of the same typeThen move points of segments
  7. Select path to refactor its segments
  8. Click Refactor segments
  9. Click on the green point middle of a segment to change its type
  10. Select the new available type of the segmentdepends of the current type and its previousThen move points of segments
  11. Select path to remove its segments
  12. Click Remove segments
  13. Click on the red point middle of the segment to removed
  14. Click Close path segments to hide tasks
Play
Insert curve intersections
Insert intersection points between curves (circle, ellipse, cubic, quadratic).
Elements can be refactored to path as needed.
Insert curve intersections 

Showcase steps

  1. Select two circles/arcs with intersections
  2. Click insert intersections icon
  3. Set options in the intersection menuAnd click Apply
  4. The element is composed of arcs with the intersection points
  5. Circle is now a path composed of arcs with the intersection points
  6. Select two ellipses with intersections
  7. Click insert intersections icon
  8. Set options and click Apply
  9. Move intersection point
  10. Select two curves with intersections
  11. Click insert intersections
  12. Click Apply
Play
Insert line intersections
Insert intersection points between one element with straight lines and another geometrical element.
Intersection points can be connected with constraints.
Fixed size elements (line, rectangle, circle, ellipse) can be refactored to path to insert intersection points.
Insert line intersections 

Showcase steps

  1. Select an element with straight lines to intersect with.In this sample the dashed polyline
  2. Select the element with intersections
  3. Click Insert intersections icon
  4. Click on an intersection point to ignore it
  5. Set options in the intersection menu:- Connect intersection points with constraints- Refactor the line to path to insert pointsClick Apply button
  6. Move an intersection point
  7. Select a rect with intersections
  8. Select a circle with intersections
  9. Select an ellipse with intersections
  10. Select a curve with intersections
Play
Move and resize with arrow keys
Shows how to move and resize elements with arrow keys
Move and resize with arrow keys 

Showcase steps

  1. Move 2 pixels with arrow keys,4 pixels with Ctrl+Arrow keys.
  2. Resize 2 pixels with Shift+Arrow keys.Width: more (Right Arrow), less (Left Arrow).Height: more (Up Arrow), less (Down Arrow).
Play
Operations on shapes
Logical operations on closed shapes (union, intersection, difference)
Operations on shapes 

Showcase steps

  1. Select closed shapes with intersections
  2. Click Shapes union icon
  3. Uncheck delete option to keep source shapesClick Apply
  4. Undo action
  5. Redo action
  6. Select closed shapes with intersections to create their intersection path
  7. Click Shapes intersection icon
  8. Keep source shapes if needed
  9. Click Apply
  10. Select closed shapes with intersections to create difference path
  11. Click Shapes difference icon
  12. Click Apply
  13. Logical shapes operations create composite paths
Play
Refactor elements
Change the type of an element to polyline, polygon or path depending on its geometry.
Refactor elements 

Showcase steps

  1. Select a line
  2. The geometry of the line is defined by 2 points
  3. Open selection menu
  4. Click refactor to polyline icon
  5. The element is a polyline with 2 points
  6. Select a path with only lineTo commands
  7. The path has 5 lineTo commands
  8. Click refactor to polyline icon
  9. The element is a polyline with 6 points
  10. Select a rect
  11. Click refactor to polygon
  12. The element is a polygon with 4 points
  13. Select a closed path with only lineTo commands
  14. The path has 3 lineTo commands
  15. Click refactor to polygon icon
  16. The element is a polygon with 5 points
  17. Select a circle
  18. Click on refactor to path icon
  19. The element is a path with 2 arcTo commands
  20. Select a ellipse
  21. Click refactor to path icon
  22. The element is a path with 2 arcTo commands
Play
Reverse direction of lines
Shows how to reverse direction of lines, polylines and paths
Reverse direction of lines 

Showcase steps

  1. Select line
  2. Click properties icon
  3. Open geometry tab
  4. Click reverse direction
  5. Click close
  6. Select polyline
  7. Click reverse direction
  8. Click close
  9. Select path
  10. Click reverse direction
  11. Click close
Play
Round the rectangle corners
Round the corners of a rectangle by applying a ratio in a circular or elliptical shape
Round the rectangle corners 

Showcase steps

  1. Select a rectangle
  2. Click Round rect corners icon
  3. The slider set the ratio of radius by half width
  4. Two modes: - circular radius rx and ry are equals - elliptical rx = ratio * with, ry = ratio * height
  5. Elliptical modeRectangle becomes ellipse with ratio=100
  6. The ratio value between (0,100)
  7. Click OK to apply the transformation
  8. Open properties dialog
  9. Open geometry panel
  10. The rx and ry values (radius x y)Equal values if circular, not equals if elliptical
  11. Click Close
Play
Transform elements
Rotate, scale and flip elements
Transform elements 

Showcase steps

  1. Select element to rotate.
  2. Click Resize and Rotate icon.
  3. Move the center point of the transform. Default is the selection center point.
  4. Click Rotate +45 icon.
  5. Click Enter rotate angle icon.
  6. Enter rotate angle in degrees.
  7. Click OK
  8. Rotate the element with one of the handles.
  9. Select another element to scale.
  10. Click Scale +50% icon.
  11. Enter scale factor
  12. Resize the element with one of the handles.
  13. Select another element to flip.
  14. Click Flip horizontal icon.
  15. Click Flip vertical icon.
Play