Draw a shape or path in your project
You can draw shapes, paths, and controls to design the user interface of your application. Items that you draw become objects in your application.
To draw a shape
In the Tools panel, select one of the shape tools: Rectangle
.png "Dd185502.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(en-us,Expression.30).png")
or Ellipse .png "Dd185502.8938cfdf-9b75-4a33-bc88-b0636e114a0d(en-us,Expression.30).png")
.Tip
To view all the drawing tools, right-click the tool that is visible in the Tools panel. The Line tool creates a path object, which is covered later in this topic.
.png "Dd185502.8fbbbb21-be83-4cf6-903b-3a49f00c9860(en-us,Expression.30).png")
On the artboard, draw the shape by dragging with your mouse.
Notice that as you draw the shape, the width and height dimensions appear as follows:
.png "Dd185502.b9dabf44-71aa-43cb-b4eb-f020a21b8756(en-us,Expression.30).png")
Tip
Holding down SHIFT while you drag will keep the height and width the same. Doing this will produce a square when you draw a rectangle, or a circle when you draw an ellipse.
Tip
Holding down ALT while you drag will put the center point at the first point where you click, instead of making the top-left corner of the shape the first point that you click.
After you release the mouse button, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform on the shape object. Your pointer changes to indicate which action you can perform, as shown in the following figure.
.png "Dd185502.84261e83-3091-4490-ab58-4218b188439e(en-us,Expression.30).png")
Save your changes (CTRL+S).
Next steps
To draw a path
In the Tools panel, select one of the path tools: Pen
.png "Dd185502.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.30).png")
or Pencil .png "Dd185502.509dc167-734f-46c9-b012-987ee63450cd(en-us,Expression.30).png")
.Tip
To view all the path tools, right-click the tool that is visible in the Tools panel.
.png "Dd185502.717956a8-b6a5-4e37-8af3-70bcfc78c82a(en-us,Expression.30).png")
On the artboard, draw a path by doing one of the following:
With the Pencil tool, drag on the artboard to produce a pixel everywhere that your pointer touches.
With the Pen tool, click the artboard to produce points (or vertices) that will make up a path object. Optionally, drag to produce curves at each point. To close the path, click the first point. To exit the Pen tool without closing the path, select another tool or select an object in the Objects and Timeline panel.
After you finish drawing the path, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform on the path object. Your pointer changes to indicate which action you can do with the Selection tool
.png "Dd185502.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.30).png")
..png "Dd185502.69c37d95-ec79-4885-9a63-9d26a596d31c(en-us,Expression.30).png")
To modify individual points on the path, click Direct Selection
.png "Dd185502.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.30).png")
. The path object displays individual points and line segments that you can click and move.For a list of ways to modify paths, see Pen tool modifier keys and Direct Selection tool modifier keys.
.png "Dd185502.1cb49b7a-7490-49af-b966-a719e48d8815(en-us,Expression.30).png")
Save your changes (CTRL+S).
Next steps
To draw a line
In the Tools panel, select Line
.png "Dd185502.eb618397-5283-48be-8396-3449be7b6fbf(en-us,Expression.30).png")
.Tip
If you can't see the Line tool, right-click the tool container in the Tools panel, and then select the Line tool.
.png "Dd185502.7431f56c-f3fe-4825-b6fb-6dac229422fd(en-us,Expression.30).png")
On the artboard, draw the line by dragging with your mouse.
Tip
Holding down SHIFT while you drag will constrain the line to angles that are multiples of 15 degrees.
Tip
Holding down ALT while you drag will make the first point that you click the center point, instead of making the middle of the line the center point.
After you release the mouse button, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform. Your pointer changes to indicate which action you can do with the Selection tool
.To modify the starting or ending point of the line, click Direct Selection
. The line, which is a path object, displays individual points that you can click and move.For a list of ways to modify paths, see Pen tool modifier keys and Direct Selection tool modifier keys.
Save your changes (CTRL+S).