88 lines
11 KiB
HTML
88 lines
11 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>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 autoshape/image/chart <b>size</b>, drag small squares <span class="icon icon-resize_square"></span> 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 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 alter the autoshape/image/chart <b>position</b>, use the <span class="icon icon-arrow"></span> 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>
|
|
<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> 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 at 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 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>
|
|
<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 at 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 in relation to each other by the left edge of the leftmost object,</li>
|
|
<li><b>Align Center</b> <div class = "icon icon-alignobjectcenter"></div> - to align objects in relation to each other by their centers,</li>
|
|
<li><b>Align Right</b> <div class = "icon icon-alignobjectright"></div> - to align objects in relation to each other by the right edge of the rightmost object,</li>
|
|
<li><b>Align Top</b> <div class = "icon icon-alignobjecttop"></div> - to align objects in relation to each other by the top edge of the topmost object,</li>
|
|
<li><b>Align Middle</b> <div class = "icon icon-alignobjectmiddle"></div> - to align objects in relation to each other by their middles,</li>
|
|
<li><b>Align Bottom</b> <div class = "icon icon-alignobjectbottom"></div> - to align objects in relation to each other by 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 the equal distance appears between them, click the <span class="icon icon-align_toptoolbar"></span> <b>Align</b> icon at 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 at 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 join 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 joined 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 joined 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 at 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 at 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 at 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> |