109 lines
12 KiB
HTML
109 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Manipulate objects</title>
|
||
<meta charset="utf-8" />
|
||
<meta name="description" content="Move, rotate, resize, reshape and arrange autoshapes, images, charts." />
|
||
<link type="text/css" rel="stylesheet" href="../editor.css" />
|
||
<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.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</h1>
|
||
<p>In the <a href="https://www.onlyoffice.com/spreadsheet-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Spreadsheet Editor</b></a>, you can resize, move, rotate and arrange autoshapes, images and charts inserted into your worksheet.</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>size</b> of an autoshape/image/chart, drag small squares <span class="icon icon-resize_square"></span> situated on the edges of the object. 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 class="note"><b>Note</b>: to resize the inserted chart or image you can also use the right sidebar that will be activated once you select the necessary object. To open it, click the <b>Chart settings</b> <span class="icon icon-chartsettingsicon"></span> or the <b>Image settings</b> <span class="icon icon-image_settings_icon"></span> icon to the right.</p>
|
||
<p><span class="big big-maintain_proportions"></span></p>
|
||
<h3>Move objects</h3>
|
||
<p>
|
||
To change the <b>position</b> of an autoshape/image/chart, use the Arrow <span class="icon icon-arrow"></span> icon that appears after hovering the mouse cursor over the object. Drag the object to the necessary position without releasing the mouse button.
|
||
To move the object by 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>
|
||
<h3>Rotate objects</h3>
|
||
<p>To manually <b>rotate</b> the autoshape/image, hover the mouse cursor over the rotation handle <span class="icon icon-greencircle"></span> 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 a shape or image 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> <span class="icon icon-shape_settings_icon"></span> icon or the <b>Image settings</b> <span class="icon icon-image_settings_icon"></span> icon to the right. Click one of the buttons:</p>
|
||
<ul>
|
||
<li><div class = "icon icon-rotatecounterclockwise"></div> to rotate the object by 90 degrees counterclockwise</li>
|
||
<li><div class = "icon icon-rotateclockwise"></div> to rotate the object by 90 degrees clockwise</li>
|
||
<li><div class = "icon icon-fliplefttoright"></div> to flip the object horizontally (left to right)</li>
|
||
<li><div class = "icon icon-flipupsidedown"></div> to flip the object vertically (upside down)</li>
|
||
</ul>
|
||
<p>It's also possible to right-click the image or shape, choose the <b>Rotate</b> option from the contextual menu and then use one of the available rotation options.</p>
|
||
<p>To rotate a shape or image 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>
|
||
<h3>Reshape autoshapes</h3>
|
||
<p>When modifying some shapes, for example Figured arrows or Callouts, the yellow diamond-shaped <span class="icon icon-yellowdiamond"></span> icon is also available. It allows you to adjust some aspects of the shape, for example, the length of the head of an arrow.</p>
|
||
<p><span class="big big-reshaping"></span></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 shape’s 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 curve’s smoothness.
|
||
<p><span class = "big big-editpoints_example"></span></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>Align objects</h3>
|
||
<p>To <b>align</b> <em>two or more</em> selected objects in relation to each other, hold down the <b>Ctrl</b> key while selecting the objects with the mouse, then click the <span class="icon icon-align_toptoolbar"></span> <b>Align</b> icon on the <b>Layout</b> tab of the top toolbar and select the necessary alignment type from the list:</p>
|
||
<ul>
|
||
<li><b>Align Left</b> <div class = "icon icon-alignobjectleft"></div> - to align objects relative to each other to the left edge of the leftmost object,</li>
|
||
<li><b>Align Center</b> <div class = "icon icon-alignobjectcenter"></div> - to align objects relative to each other in the center,</li>
|
||
<li><b>Align Right</b> <div class = "icon icon-alignobjectright"></div> - to align objects relative to each other to the right edge of the rightmost object,</li>
|
||
<li><b>Align Top</b> <div class = "icon icon-alignobjecttop"></div> - to align objects relative to each other to the top edge of the topmost object,</li>
|
||
<li><b>Align Middle</b> <div class = "icon icon-alignobjectmiddle"></div> - to align objects relative to each other in the middle,</li>
|
||
<li><b>Align Bottom</b> <div class = "icon icon-alignobjectbottom"></div> - to align objects relative to each other to the bottom edge of the bottommost object.</li>
|
||
</ul>
|
||
<p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available alignment options.</p>
|
||
<p class="note"><b>Note</b>: the alignment options are disabled if you select less than two objects.</p>
|
||
<h3>Distribute objects</h3>
|
||
<p>To <b>distribute</b> <em>three or more</em> selected objects horizontally or vertically between two outermost selected objects so that there is equal distance between them, click the <span class="icon icon-align_toptoolbar"></span> <b>Align</b> icon on the <b>Layout</b> tab of the top toolbar and select the necessary distribution type from the list:</p>
|
||
<ul>
|
||
<li><b>Distribute Horizontally</b> <div class = "icon icon-distributehorizontally"></div> - to distribute objects evenly between the leftmost and rightmost selected objects.</li>
|
||
<li><b>Distribute Vertically</b> <div class = "icon icon-distributevertically"></div> - to distribute objects evenly between the topmost and bottommost selected objects.</li>
|
||
</ul>
|
||
<p>Alternatively, you can right-click the selected objects, choose the <b>Align</b> option from the contextual menu and then use one of the available distribution options.</p>
|
||
<p class="note"><b>Note</b>: the distribution options are disabled if you select less than three objects.</p>
|
||
<h3>Group several objects</h3>
|
||
<p>To manipulate several objects at once, you can <b>group</b> them. Hold down the <b>Ctrl</b> key while selecting the objects with the mouse, then click the arrow next to the <span class="icon icon-group_toptoolbar"></span> <b>Group</b> icon on the <b>Layout</b> tab of the top toolbar and select the necessary option from the list:</p>
|
||
<ul>
|
||
<li><b>Group</b> <div class = "icon icon-group"></div> - to combine several objects into a group so that they can be simultaneously rotated, moved, resized, aligned, arranged, copied, pasted, formatted like a single object.</li>
|
||
<li><b>Ungroup</b> <div class = "icon icon-ungroup"></div> - to ungroup the selected group of the previously combined objects.</li>
|
||
</ul>
|
||
<p>Alternatively, you can right-click the selected objects, choose the <b>Arrange</b> option from the contextual menu and then use the <b>Group</b> or <b>Ungroup</b> option.</p>
|
||
<p class="note"><b>Note</b>: the <b>Group</b> option is disabled if you select less than two objects. The <b>Ungroup</b> option is available only when a group of the previously combined objects is selected.</p>
|
||
<p><img alt="Group several objects" src="../images/grouping.png" /></p>
|
||
<h3 id="arrange">Arrange several objects</h3>
|
||
<p>To <b>arrange</b> the selected object or several objects (e.g. to change their order when several objects overlap each other), you can use the <span class="icon icon-bringforward_toptoolbar"></span> <b>Bring Forward</b> and <span class="icon icon-sendbackward_toptoolbar"></span> <b>Send Backward</b> icons on the <b>Layout</b> tab of the top toolbar and select the necessary arrangement type from the list.</p>
|
||
<p>To move the selected object(s) forward, click the arrow next to the <span class="icon icon-bringforward_toptoolbar"></span> <b>Bring Forward</b> icon on the <b>Layout</b> tab of the top toolbar and select the necessary arrangement type from the list:</p>
|
||
<ul>
|
||
<li><b>Bring To Foreground</b> <div class = "icon icon-bringtofront"></div> - to move the object(s) in front of all other objects,</li>
|
||
<li><b>Bring Forward</b> <div class = "icon icon-bringforward"></div> - to move the selected object(s) by one level forward as related to other objects.</li>
|
||
</ul>
|
||
<p>To move the selected object(s) backward, click the arrow next to the <span class="icon icon-sendbackward_toptoolbar"></span> <b>Send Backward</b> icon on the <b>Layout</b> tab of the top toolbar and select the necessary arrangement type from the list:</p>
|
||
<ul>
|
||
<li><b>Send To Background</b> <div class = "icon icon-sendtoback"></div> - to move the object(s) behind all other objects,</li>
|
||
<li><b>Send Backward</b> <div class = "icon icon-sendbackward"></div> - to move the selected object(s) by one level backward as related to other objects.</li>
|
||
</ul>
|
||
<p>Alternatively, you can right-click the selected object(s), choose the <b>Arrange</b> option from the contextual menu and then use one of the available arrangement options.</p>
|
||
</div>
|
||
</body>
|
||
</html> |