mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-25 03:43:08 +08:00
241 lines
23 KiB
HTML
241 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Insert and format autoshapes</title>
|
||
<meta charset="utf-8" />
|
||
<meta name="description" content="Add an autoshape to your presentation and adjust its properties." />
|
||
<link type="text/css" rel="stylesheet" href="../../../../../../common/main/resources/help/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="../../../../../../common/main/resources/help/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>Insert and format autoshapes</h1>
|
||
<h3>Insert an autoshape</h3>
|
||
<p>To <b>add</b> an autoshape to a slide in the <a target="_blank" href="https://www.onlyoffice.com/presentation-editor.aspx" onclick="onhyperlinkclick(this)"><b>Presentation Editor</b></a>,</p>
|
||
<ol>
|
||
<li>in the slide list on the left, select the slide you want to add the autoshape to,</li>
|
||
<li>click the <div class="big big-shapegallery"></div> <b>Shape gallery</b> dropdown arrow on the <b>Home</b> tab or the <b>Insert</b> tab of the top toolbar,</li>
|
||
<li>select one of the available autoshape groups from the <b>Shape Gallery</b>: <em>Recently Used</em>, <em>Basic Shapes</em>, <em>Figured Arrows</em>, <em>Math</em>, <em>Charts</em>, <em>Stars & Ribbons</em>, <em>Callouts</em>, <em>Buttons</em>, <em>Rectangles</em>, <em>Lines</em>,</li>
|
||
<li>click on the necessary autoshape within the selected group,</li>
|
||
<li>
|
||
in the slide editing area, place the mouse cursor where you want the shape to be put,
|
||
<p class="note"><b>Note</b>: you can click and drag to stretch the shape.</p>
|
||
</li>
|
||
<li>
|
||
once the autoshape is added, you can <a href="../UsageInstructions/ManipulateObjects.htm" onclick="onhyperlinkclick(this)">change its size, position</a> and properties. You can save the autoshape as picture on your hard drive using the <b>Save as picture</b> option in the right-click menu.
|
||
<p class="note"><b>Note</b>: to add a caption within the autoshape, make sure the shape is selected on the slide and start typing your text. The text you add in this way becomes a part of the autoshape (when you move or rotate the shape, the text moves or rotates with it).</p>
|
||
</li>
|
||
</ol>
|
||
<p>To make a shape into a <b>link</b>:</p>
|
||
<ul>
|
||
<li>select the shape and use the <kbd>Ctrl</kbd>+<kbd>K</kbd> key combination, or</li>
|
||
<li>select the shape, switch to the <b>Insert</b> tab, and click the <b>Link</b> button, or</li>
|
||
<li>select the shape, click it with the right mouse button, and choose the <b>Link</b> menu option.</li>
|
||
</ul>
|
||
<p>To learn more about working with links, please refer to the <a href="../UsageInstructions/AddHyperlinks.htm" target="_blank">following article</a>.</p>
|
||
<p>It's also possible to add an autoshape to a slide layout. To learn more, please refer to this <a href="../UsageInstructions/SetSlideParameters.htm#addtolayout" onclick="onhyperlinkclick(this)">article</a>.</p>
|
||
<hr />
|
||
<h3>Copy autoshape style formatting</h3>
|
||
<p>To <b>copy</b> a certain autoshape style formatting,</p>
|
||
<ol>
|
||
<li>select the autoshape whose formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">using the keyboard</a>,</li>
|
||
<li>click the <b>Copy style</b> <div class="icon icon-copystyle"></div> icon on the <b>Home</b> tab of the top toolbar (the mouse pointer will look like this <div class="icon icon-paste_style"></div>),</li>
|
||
<li>select the required autoshape to apply the same formatting.</li>
|
||
</ol>
|
||
<!--<p>To <b>apply the copied formatting</b> to multiple autoshapes,</p>
|
||
<ol>
|
||
<li>select the autoshape whose formatting you need to copy with the mouse or <a href="../HelpfulHints/KeyboardShortcuts.htm#textselection" onclick="onhyperlinkclick(this)">use the keyboard</a>,</li>
|
||
<li>double-click the <b>Copy style</b> <div class="icon icon-copystyle"></div> icon on the <b>Home</b> tab of the top toolbar (the mouse pointer will look like this <div class="icon icon-paste_style"></div> and the <b>Copy style</b> icon will remain selected: <div class="icon icon-copystyle_selected"></div>),</li>
|
||
<li>select the necessary autoshapes one by one to apply the same formatting to each of them,</li>
|
||
<li>to exit this mode, click the <b>Copy style</b> <div class="icon icon-copystyle_selected"></div> icon once again or press the <b>Esc</b> key on the keyboard.</li>
|
||
</ol>
|
||
<p>To <b>quickly remove the applied formatting</b> from your shape,</p>
|
||
<ol>
|
||
<li>select the autoshape whose formatting you want to remove,</li>
|
||
<li>click the <b>Clear style</b> <div class="icon icon-clearstyle"></div> icon on the <b>Home</b> tab of the top toolbar.</li>
|
||
</ol>-->
|
||
<hr />
|
||
<h3>Adjust autoshape settings</h3>
|
||
<p id="shape_rightclickmenu">To align and arrange autoshapes, use the <b>right-click menu</b>. The menu options are:</p>
|
||
<ul>
|
||
<li><b>Cut, Copy, Paste</b> — standard options which are used to cut or copy the selected text/object and paste the previously cut/copied text passage or object to the current cursor position.</li>
|
||
<li><b>Arrange</b> is used to bring the selected autoshape to foreground, send it to background, move forward or backward as well as group or ungroup shapes to perform operations with several of them at once. To learn more on how to arrange objects, please refer to <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">this page</a>.</li>
|
||
<li><b>Align</b> is used to align the shape to the left, in the center, to the right, at the top, in the middle, at the bottom. To learn more on how to align objects, please refer to <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">this page</a>.</li>
|
||
<li><b>Rotate</b> is used to rotate the shape by 90 degrees clockwise or counterclockwise as well as to flip the shape horizontally or vertically.</li>
|
||
<li><b>Save as picture</b> is used to save the shape as a picture on your hard drive.</li>
|
||
<li>
|
||
<b>Edit points</b> is used to customize or to change the curvature of your shape.
|
||
<ol>
|
||
<li>To activate a shape’s editable anchor points, right-click the shape and choose <b>Edit points</b> from the menu or click the <b>Edit shape</b> > <b>Edit points</b> option on the right panel. 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.</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 a curve and to change a curve’s 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.
|
||
<p><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.</p>
|
||
<p><b>To delete a point</b>, hold <b>Ctrl</b> and click the unnecessary point.</p>
|
||
</li>
|
||
</ol>
|
||
</li>
|
||
<li><b>Shape Advanced Settings</b> is used to open the 'Shape — Advanced Settings' window.</li>
|
||
<li><b>Add to layout</b> is used to merge the autoshape with the background layout of the slide.</li>
|
||
</ul>
|
||
<hr />
|
||
<p>Some of the autoshape settings can be altered using the <b>Shape settings</b> tab of the right sidebar. To activate it, click the autoshape and choose the <b>Shape settings</b> <span class="icon icon-shape_settings_icon"></span> icon on the right. Here you can change the following properties:</p>
|
||
<p><img class="floatleft" alt="Shape settings tab" src="../images/shapesettingstab.png" /></p>
|
||
<ul style="margin-left: 280px;">
|
||
<li>
|
||
<b>Fill</b> — use this section to select the autoshape fill. You can choose the following options:
|
||
<ul>
|
||
<li><b>Color fill</b> — to specify the solid color you want to apply to the selected shape.</li>
|
||
<li><b>Gradient fill</b> — to fill the shape with two colors which smoothly change from one to another.</li>
|
||
<li><b>Picture or texture</b> — to use an image or a predefined texture as the shape background.</li>
|
||
<li><b>Pattern</b> — to fill the shape with a two-colored design composed of regularly repeated elements.</li>
|
||
<li><b>No fill</b> — select this option if you don't want to use any fill.</li>
|
||
</ul>
|
||
<p>For more detailed information on these options, please refer to the <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">Fill objects and select colors</a> section.</p>
|
||
</li>
|
||
<li id="shapestroke">
|
||
<b>Line</b> — use this section to change the width, color or type of the autoshape line.
|
||
<ul>
|
||
<li>To change the line <b>width</b>, select one of the available options from the <b>Size</b> drop-down list. The available options are: 0.5 pt, 1 pt, 1.5 pt, 2.25 pt, 3 pt, 4.5 pt, 6 pt. Or select the <b>No Line</b> option if you don't want to use any line.</li>
|
||
<li>To change the line <b>color</b>, click on the colored box below and <a href="../UsageInstructions/FillObjectsSelectColor.htm" onclick="onhyperlinkclick(this)">select the necessary color</a>. You can use the selected <b>theme color</b>, a <b>standard color</b> or choose a <b>custom color</b>.</li>
|
||
<li>To change the line <b>type</b>, select the necessary option from the corresponding dropdown list (a solid line is applied by default, you can change it to one of the available dashed lines).</li>
|
||
<li>To change the line <b>opacity</b>, enter the required value manually or use the corresponding slider bar.</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<b>Rotation</b> is used to rotate the shape by 90 degrees clockwise or counterclockwise as well as to flip the shape horizontally or vertically. Click one of the buttons:
|
||
<ul>
|
||
<li><div class="icon icon-rotatecounterclockwise"></div> to rotate the shape by 90 degrees counterclockwise</li>
|
||
<li><div class="icon icon-rotateclockwise"></div> to rotate the shape by 90 degrees clockwise</li>
|
||
<li><div class="icon icon-fliplefttoright"></div> to flip the shape horizontally (left to right)</li>
|
||
<li><div class="icon icon-flipupsidedown"></div> to flip the shape vertically (upside down)</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<b>Edit shape</b> — use this section to edit the shape points or to replace the current autoshape with another one selected from the dropdown list.
|
||
<ul>
|
||
<li>
|
||
<b>Edit points</b> is used to customize or to change the curvature of your shape.
|
||
<ol>
|
||
<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 a curve and to change a curve’s 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.
|
||
<p><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.</p>
|
||
<p><b>To delete a point</b>, hold <b>Ctrl</b> and click the unnecessary point.</p>
|
||
</li>
|
||
</ol>
|
||
</li>
|
||
<li><b>Change shape</b> is used to replace the current autoshape. Choose another autoshape from the dropdown list.</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<b>Shadow</b> — open this menu to choose one of the preset shadow styles used for the shape.
|
||
<ul>
|
||
<li><b>No Shadow</b> — uncheck this menu point to display a shadow, and vice versa.</li>
|
||
<li><b>Color</b> — choose one of the available colors either on the <b>Theme colors</b> or the <b>Standard colors</b> palette; use the <b>Eyedropper</b> tool to copy color from other objects in the document; or click the <b>More colors</b> menu item to create a custom color.</li>
|
||
<li>
|
||
<b>Adjust Shadow</b> — create a custom shadow using the following sliders:
|
||
<p><img alt="Adjust shadow" src="../../../../../../common/main/resources/help/en/images/adjust_shadow.png" /></p>
|
||
<ul>
|
||
<li><b>Transparency</b> — adjust the transparency of the shadow.</li>
|
||
<li><b>Size</b> — adjust the size of the shadow.</li>
|
||
<li><b>Angle</b> — adjust the angle of the shadow relative to its object.</li>
|
||
<li><b>Distance</b> — adjust the distance of the shadow from its object.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<hr />
|
||
<p>To change the <b>advanced settings</b> of the autoshape, right-click the shape and select the <b>Shape Advanced Settings</b> option from the contextual menu or left-click it and press the <b>Show advanced settings</b> link on the right sidebar. The shape properties window will be opened:</p>
|
||
<p><img alt="Shape Properties — General tab" src="../images/shape_properties6.png" /></p>
|
||
<p><b>General</b> — displays an editable shape name, which can be used for referencing.</p>
|
||
<p><img alt="Shape Properties — Size tab" src="../images/shape_properties1.png" /></p>
|
||
<p>The <b>Placement</b> tab allows you to change the autoshape <b>Width</b> and/or <b>Height</b>. If the <b>Constant proportions</b> <span class="icon icon-constantproportions"></span> button is clicked (in this case it looks like this <span class="icon icon-constantproportionsactivated"></span>), the width and height will be changed together preserving the original autoshape aspect ratio.</p>
|
||
<p>You can also set the exact position using the <b>Horizontal</b> and <b>Vertical</b> fields, as well as the <b>From</b> field where you can access such settings as <b>Top Left Corner</b> and <b>Center</b>.</p>
|
||
<p><img alt="Shape — Advanced Settings" src="../images/shape_properties5.png" /></p>
|
||
<p>The <b>Rotation</b> tab contains the following parameters:</p>
|
||
<ul>
|
||
<li><b>Angle</b> — use this option to rotate the shape by an exactly specified angle. Enter the necessary value measured in degrees into the field or adjust it using the arrows on the right. </li>
|
||
<li><b>Flipped</b> — check the <b>Horizontally</b> box to flip the shape horizontally (left to right) or check the <b>Vertically</b> box to flip the shape vertically (upside down).</li>
|
||
</ul>
|
||
<p><img alt="Shape Properties — Weights & Arrows tab" src="../images/shape_properties.png" /></p>
|
||
<p>The <b>Weights & Arrows</b> tab contains the following parameters:</p>
|
||
<ul>
|
||
<li>
|
||
<b>Line Style</b> — this option allows specifying the following parameters:
|
||
<ul>
|
||
<li>
|
||
<b>Cap Type</b> — this option allows setting the style for the end of the line, therefore it can be applied only to the shapes with the open outline, such as lines, polylines, etc.:
|
||
<ul>
|
||
<li><b>Flat</b> — the end points will be flat.</li>
|
||
<li><b>Round</b> — the end points will be rounded.</li>
|
||
<li><b>Square</b> — the end points will be square.</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<b>Join Type</b> — this option allows setting the style for the intersection of two lines, for example, it can affect a polyline or the corners of the triangle or rectangle outline:
|
||
<ul>
|
||
<li><b>Round</b> — the corner will be rounded.</li>
|
||
<li><b>Bevel</b> — the corner will be cut off angularly.</li>
|
||
<li><b>Miter</b> — the corner will be pointed. It goes well to shapes with sharp angles.</li>
|
||
</ul>
|
||
<p class="note"><b>Note</b>: the effect will be more noticeable if you use a large outline width.</p>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><b>Arrows</b> — this option group is available if a shape from the <b>Lines</b> shape group is selected. It allows you to set the arrow <b>Start</b> and <b>End Style</b> and <b>Size</b> by selecting the appropriate option from the drop-down lists.</li>
|
||
</ul>
|
||
<p id="internalmargins"><img alt="Shape Properties — Text Padding tab" src="../images/shape_properties3.png" /></p>
|
||
<p>
|
||
The <b>Text Box</b> tab contains the following parameters:
|
||
<ul>
|
||
<li><b>AutoFit</b> — to change the way text is displayed within the shape: <b>Do not Autofit</b>, <b>Shrink text on overflow</b>, <b>Resize shape to fit text</b>.</li>
|
||
<li><b>Text Padding</b> — to change the autoshape <b>Top</b>, <b>Bottom</b>, <b>Left</b> and <b>Right</b> internal margins (i.e., the distance between the text within the shape and the autoshape borders).</li>
|
||
</ul>
|
||
</p>
|
||
<p class="note"><b>Note</b>: this tab is only available if text is added within the autoshape, otherwise the tab is disabled.</p>
|
||
<p id="columns"><img alt="Shape Properties — Columns tab" src="../images/shape_properties2.png" /></p>
|
||
<p>The <b>Columns</b> tab allows adding columns of text within the autoshape specifying the necessary <b>Number of columns</b> (up to 16) and <b>Spacing between columns</b>. Once you click <b>OK</b>, the text that already exists or any other text you enter within the autoshape will appear in columns and will flow from one column to another.</p>
|
||
<p><img alt="Shape Properties — Alternative Text tab" src="../images/shape_properties4.png" /></p>
|
||
<p>The <b>Alternative Text</b> tab allows specifying the <b>Title</b> and <b>Description</b> which will be read to people with vision or cognitive impairments to help them better understand the contents of the shape.</p>
|
||
<hr />
|
||
<p>To <b>replace</b> the added autoshape, left-click it and use the <b>Change Autoshape</b> drop-down list on the <b>Shape settings</b> tab of the right sidebar.</p>
|
||
<p>To <b>delete</b> the added autoshape, left-click it and press the <b>Delete</b> key.</p>
|
||
<p>To learn how to <b>align</b> an autoshape on the slide or <b>arrange</b> several autoshapes, refer to the <a href="../UsageInstructions/AlignArrangeObjects.htm" onclick="onhyperlinkclick(this)">Align and arrange objects on a slide</a> section.</p>
|
||
<hr />
|
||
<h3>Join autoshapes using connectors</h3>
|
||
<p>You can connect autoshapes using lines with connection points to demonstrate dependencies between the objects (e.g. if you want to create a flowchart). To do that,</p>
|
||
<ol>
|
||
<li>click the <div class="big big-shapegallery"></div> <b>Shape gallery</b> dropdown arrow on the <b>Home</b> tab or the <b>Insert</b> tab of the top toolbar,</li>
|
||
<li>
|
||
select the <b>Lines</b> group from the menu,
|
||
<p><img alt="Shapes — Lines" src="../images/connectors.png" /></p>
|
||
</li>
|
||
<li>click the necessary shape within the selected group (excepting the last three shapes which are not connectors, namely <em>Curve</em>, <em>Scribble</em> and <em>Freeform</em>),</li>
|
||
<li>
|
||
hover the mouse cursor over the first autoshape and click one of the connection points <div class="icon icon-connectionpoint"></div> that appear on the shape outline,
|
||
<p><span class="big big-connectors_firstshape"></span></p>
|
||
</li>
|
||
<li>
|
||
drag the mouse cursor towards the second autoshape and click the necessary connection point on its outline.
|
||
<p><span class="big big-connectors_secondshape"></span></p>
|
||
</li>
|
||
</ol>
|
||
<p>If you move the joined autoshapes, the connector remains attached to the shapes and moves together with them. </p>
|
||
<p><span class="big big-connectors_moveshape"></span></p>
|
||
<p>You can also detach the connector from the shapes and then attach it to any other connection points.</p>
|
||
</div>
|
||
</body>
|
||
</html> |