web-apps/apps/presentationeditor/main/resources/help/en/UsageInstructions/ManipulateObjects.htm
Julia Radzhabova afcf5b68f7 Update help
2022-05-16 16:43:03 +03:00

69 lines
7.1 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<title>Manipulate objects on a slide</title>
<meta charset="utf-8" />
<meta name="description" content="Move, rotate, resize and reshape autoshapes, images, charts." />
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../search/js/page-search.js"></script>
</head>
<body>
<div class="mainpart">
<div class="search-field">
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
</div>
<h1>Manipulate objects on a slide</h1>
<p>In the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>, you can resize, move, rotate different objects on a slide manually using the special handles. You can also specify the dimensions and position of some objects exactly using the right sidebar or <b>Advanced Settings</b> window.</p>
<p class="note">
<b>Note</b>: the list of keyboard shortcuts that can be used when working with objects is available <a href="../HelpfulHints/KeyboardShortcuts.htm#workwithobjects" onclick="onhyperlinkclick(this)">here</a>.
</p>
<h3>Resize objects</h3>
<p>To change the <b>autoshape/image/chart/table/text box</b> size, drag small squares <img alt="Square icon" src="../images/resize_square.png" /> situated on the object edges. To maintain the original proportions of the selected object while resizing, hold down the <b>Shift</b> key and drag one of the corner icons.</p>
<p><img alt="Maintaining proportions" src="../images/maintain_proportions.png" /></p>
<p>To specify the precise width and height of a <b>chart</b>, select it on a slide and use the <b>Size</b> section of the right sidebar that will be activated.</p>
<p>To specify the precise dimensions of an <b>image</b> or <b>autoshape</b>, right-click the necessary object on the slide and select the <b>Image/Shape Advanced Settings</b> option from the menu. Specify necessary values on the <b>Size</b> tab of the <b>Advanced Settings</b> window and press <b>OK</b>.</p>
<h3>Reshape autoshapes</h3>
<p>When modifying some shapes, for example Figured arrows or Callouts, the yellow diamond-shaped <img alt="Yellow diamond icon" src="../images/yellowdiamond.png" /> icon is also available. It allows adjusting some aspects of the shape, for example, the length of the head of an arrow.</p>
<p><img alt="Reshaping autoshape" src="../images/reshaping.png" /></p>
<p>To reshape an autoshape, you can also use the <b>Edit Points</b> option from the <b>context menu</b>.</p>
<p>The <b>Edit Points</b> option is used to customize or to change the curvature of your shape.</p>
<ol>
<li>
To activate a shapes editable anchor points, right-click the shape and choose <b>Edit Points</b> from the menu. The black squares that become active are the points where two lines meet, and the red line outlines the shape. Click and drag it to reposition the point, and to change the shape outline.
<p><img alt="Edit Points Menu" src="../images/editpoints_rightclick.png" /></p>
</li>
<li>
Once you click the anchor point, two blue lines with white squares at the ends will appear. These are Bezier handles that allow you to create and a curve and to change a curves smoothness.
<p><img alt="Edit Points" src="../images/editpoints_example.png" /></p>
</li>
<li>
As long as the anchor points are active, you can add and delete them:
<ul>
<li><b>To add a point to a shape</b>, hold <b>Ctrl</b> and click the position where you want to add an anchor point.</li>
<li><b>To delete a point</b>, hold <b>Ctrl</b> and click the unnecessary point.</li>
</ul>
</li>
</ol>
<h3>Move objects</h3>
<p>
To alter the <b>autoshape/image/chart/table/text box</b> position, use the <img alt="Arrow" src="../images/arrow.png" /> icon that appears after hovering your mouse cursor over the object. Drag the object to the necessary position without releasing the mouse button.
To move the object by the one-pixel increments, hold down the <b>Ctrl</b> key and use the keybord arrows.
To move the object strictly horizontally/vertically and prevent it from moving in a perpendicular direction, hold down the <b>Shift</b> key when dragging.
</p>
<p>To specify the precise position of an <b>image</b>, right-click it on a slide and select the <b>Image Advanced Settings</b> option from the menu. Specify necessary values in the <b>Position</b> section of the <b>Advanced Settings</b> window and press <b>OK</b>.</p>
<h3>Rotate objects</h3>
<p>To manually rotate an <b>autoshape/image/text box</b>, hover the mouse cursor over the rotation handle <img alt="Rotation handle" src="../images/greencircle.png" /> and drag it clockwise or counterclockwise. To constrain the rotation angle to 15 degree increments, hold down the <b>Shift</b> key while rotating.</p>
<p>To rotate the object by 90 degrees counterclockwise/clockwise or flip the object horizontally/vertically, you can use the <b>Rotation</b> section of the right sidebar that will be activated once you select the necessary object. To open it, click the <b>Shape settings</b> <img alt="Shape settings icon" src="../images/shape_settings_icon.png" /> or the <b>Image settings</b> <img alt="Image settings icon" src="../images/image_settings_icon.png" /> icon to the right. Click one of the buttons:</p>
<ul>
<li><img alt="Rotate counterclockwise icon" src="../images/rotatecounterclockwise.png" /> to rotate the object by 90 degrees counterclockwise</li>
<li><img alt="Rotate clockwise icon" src="../images/rotateclockwise.png" /> to rotate the object by 90 degrees clockwise</li>
<li><img alt="Flip horizontally icon" src="../images/fliplefttoright.png" /> to flip the object horizontally (left to right)</li>
<li><img alt="Flip vertically icon" src="../images/flipupsidedown.png" /> to flip the object vertically (upside down)</li>
</ul>
<p>It's also possible to right-click the object, choose the <b>Rotate</b> option from the contextual menu and then use one of the available rotation options.</p>
<p>To rotate the object by an exactly specified angle, click the <b>Show advanced settings</b> link on the right sidebar and use the <b>Rotation</b> tab of the <b>Advanced Settings</b> window. Specify the necessary value measured in degrees in the <b>Angle</b> field and click <b>OK</b>.</p>
</div>
</body>
</html>