Freigeben über


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.

You can also add a variety of common shapes such as rectangles, stars, rings, and arrows directly from the Assets panel by clicking Shapes, and then clicking the shape that you want. You can then resize the shape using the on-object handles that appear when you move the pointer over the corners of the blue bounding box of the shape.

Formenkategorie im Objektbereich

For more information about adding or modifying objects on the artboard, see Add or modify an object.

To draw a shape

  1. In the Tools panel, select one of the shape tools: Rectangle JJ170347.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(de-de,VS.110).png or Ellipse JJ170347.8938cfdf-9b75-4a33-bc88-b0636e114a0d(de-de,VS.110).png.

    TippTipp

    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.

    JJ170347.8fbbbb21-be83-4cf6-903b-3a49f00c9860(de-de,VS.110).png

  2. 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:

    JJ170347.b9dabf44-71aa-43cb-b4eb-f020a21b8756(de-de,VS.110).png

    TippTipp

    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.

    TippTipp

    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.

    JJ170347.84261e83-3091-4490-ab58-4218b188439e(de-de,VS.110).png

  3. Save your changes (Ctrl+S).

JJ170347.collapse_all(de-de,VS.110).gifNext steps

To draw a path

  1. In the Tools panel, select one of the path tools: Pen JJ170347.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(de-de,VS.110).png or Pencil JJ170347.509dc167-734f-46c9-b012-987ee63450cd(de-de,VS.110).png.

    TippTipp

    To view all the path tools, right-click the tool that is visible in the Tools panel.

    JJ170347.717956a8-b6a5-4e37-8af3-70bcfc78c82a(de-de,VS.110).png

  2. 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 perform with the Selection tool JJ170347.2ff91340-477e-4efa-a0f7-af20851e4daa(de-de,VS.110).png.

    JJ170347.69c37d95-ec79-4885-9a63-9d26a596d31c(de-de,VS.110).png

    To modify individual points on the path, click Direct Selection JJ170347.6dd6571f-c116-451d-8dd2-1f88b8406362(de-de,VS.110).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 (Blend) and Direct Selection tool modifier keys (Blend).

    JJ170347.1cb49b7a-7490-49af-b966-a719e48d8815(de-de,VS.110).png

  3. Save your changes (Ctrl+S).

JJ170347.collapse_all(de-de,VS.110).gifNext steps

To draw a line

  1. In the Tools panel, select Line JJ170347.eb618397-5283-48be-8396-3449be7b6fbf(de-de,VS.110).png.

    TippTipp

    If you can't see the Line tool, right-click the tool container in the Tools panel, and then select the Line tool.

    JJ170347.8fbbbb21-be83-4cf6-903b-3a49f00c9860(de-de,VS.110).png

  2. On the artboard, draw the line by dragging with your mouse.

    TippTipp

    Holding down Shift while you drag will constrain the line to angles that are multiples of 15 degrees.

    TippTipp

    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 perform with the Selection tool JJ170347.2ff91340-477e-4efa-a0f7-af20851e4daa(de-de,VS.110).png.

    To modify the starting or ending point of the line, click Direct Selection JJ170347.6dd6571f-c116-451d-8dd2-1f88b8406362(de-de,VS.110).png. 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 (Blend) and Direct Selection tool modifier keys (Blend).

  3. Save your changes (Ctrl+S).

JJ170347.collapse_all(de-de,VS.110).gifNext steps

Siehe auch

Aufgaben

Draw a control in your project