VECTOR DRAWING

OVERVIEW

Axure RP's pen tool draws vector-based shapes, which maintain sharp lines while resizing on the canvas and can be styled like regular shape widgets. Widgets created with the pen tool are called "custom shape" widgets. The icons in Axure's Icon library are examples of custom shapes. Use the pen tool to draw things like icons, charts, and curved arrows. Make widget libraries of custom shapes that can be easily reused and customized.

REFERENCE

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

Web Fonts and

     Font Mapping

AXURE SHARE

Basics

Security

Mobile App

Mobile Settings

Website Hosting Tutorial

Slack App

Hipchat Integration

Troubleshooting

     Connection Issues

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Using

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

CREATING CUSTOM SHAPES

DRAWING WITH THE PEN TOOL

To begin drawing, click the Pen tool icon in the Main Toolbar or use use the keyboard shortcut [CTRL] / [CMD] + [4].


Click anywhere on the canvas to place the first point of your custom shape. Move your mouse cursor and click again to add a new point. If you click and drag while adding a point, the line segment between your current point and the previous one will become a curve.


To close your shape and finish drawing, make at least three points and then click again on the first point of the shape. A small red box will appear when the mouse cursor is over the first point.


To create an open shape instead, draw at least two points and then press [ESC]. Alternatively, you can double-click instead of single-click when adding your final point to finish an open shape.


Pen tool mode will automatically close when you finish drawing a custom shape, but you can always further edit the points of your completed shape (see below). To draw another custom shape, switch to the pen tool again.

CONVERTING SHAPE WIDGETS TO CUSTOM SHAPES

You can also convert shape widgets from the Default and Flow libraries to custom shapes. Right-click a regular shape widget on the canvas and choose "Convert to Custom Shape" from the context menu.

EDITING CUSTOM SHAPES

EDITING POINTS

First, click a custom shape on the canvas to select it. Then, as you hover over the outline of the shape, you'll notice your cursor change to an arrow with a black box. Click when you see this special cursor to enter points-editing mode, where the points of your custom shape will be shown outlined in small black diamonds. You can enter points-editing mode from any other cursor mode.


In this mode, click and drag a point to move it. Hold [CTRL] / [CMD] to curve the line as you move it. Select a curved point to show yellow curve handles that can be used to adjust the curve. Hold [CTRL] while dragging a curve handle to move it independently of the other curve handle.

ADDING AND REMOVING POINTS

First click a custom shape to select it, and then click along the shape path to show the points. Your next click, anywhere along the path, will add a new point at that location.


To delete points, select one or more points in the shape. Click a point to select it; hold [SHIFT] to select additional points. Use the [DEL] key to delete, or right-click a selected point and choose "Delete".

MAKING CURVES AND SHARP CORNERS

First click a custom shape to select it, and then click along the shape path to show the points. Click a point to select it. Hold [SHIFT] to select additional points.


Right-click any selected point and choose "curve" or "sharpen" from the context menu to create curves or corners at the selected points.


You can also double-click a point to toggle it between a curve and a sharp corner.

TRANSFORMATIONS

When a shape is selected on the canvas, you can find transformation options in the Inspector > Style tab > "Location + Size" section. You can also right-click a shape and use the "Transform Shape" submenu.


Some transformations are available for single shapes, while others require that two or more shapes be selected. If you've selected regular shape widgets, certain transformations will automatically convert these to custom shapes as part of the operation.

FLIP HORIZONTAL

Flip your shape across the the y-axis (horizontally).

FLIP VERTICAL

Flip the shape across the x-axis (vertically).

UNITE

This control unites multiple shapes into a single path.

SUBTRACT

Subtract one shape from another. The "front" shape will be subtracted from the "back" shape, based on z-index (stack order) as indicated in the Outline.

INTERSECT

Using this operation will preserve only the intersecting portions of two shapes.

EXCLUDE

Join two shapes together, excluding any overlapping segments. The overlapping area will be eliminated, and the remaining sections of each shape will be preserved in one custom shape that could potentially have multiple paths.

COMBINE

Combine multiple shapes into a single custom shape, preserving each original path.

BREAK APART

Usable on previously combined custom shapes that contain multiple paths. Breaks each path into its own custom shape.

CURVE ALL POINTS

Create a curve around every point in the custom shape. (Available in the context menu > Transform submenu, but not in the Inspector.)

SHARPEN ALL POINTS

Create a sharp corner at each point in the custom shape. (Available in the context menu > Transform submenu, but not in the Inspector.)

INTERACTIONS

Custom shapes behave interactively just like other shape widgets.

 

CONVERTING IMPORTED SVGS TO CUSTOM SHAPES

You can also convert SVG images imported from other applications to custom shapes. To do so, import an SVG image into Axure RP as you would any other image file, then right-click it and select "Convert SVG to Shapes" in the context menu.