Shape View

Shape View can be used to create a view which contains vector path. There are common shape included in LayoutCode which are rectangle, rounded rectangle, oval, polygon and star. In addition, vector and pencil tool are also of type shape views.

iOS Development Notes: Shape View object is generated as ShapeView class. ShapeView class is a container class for CAShapeLayer which handles layout constraint automatically because CAShapeLayer does not support layout constraint.

A shape view with its attributes

View Attributes

Common attributes for text label are: position, size, anchor point, rotation, radius, clip to bounds, background and shadow. Additionally, these are supported:


Border contains additional child attributes

  1. Border start: Value in fraction to start drawing path. Value is from 0 – 1.
  2. Border end: Value in fraction to end drawing path. Value is from 0 – 1.
  3. Border width: The path stroke width
  4. Border color: The path stroke color

Editing Shape View

To edit shape, simply double click at the shape you want to edit, then the shape control points will be shown. The line between points can be a straight line or a curve.

Editing a shape view

Adding Control Points

To add control points, click at any points between the lines. A curve control point will then be added. You can also hold down the CMD key and click on a line between the two points, as a result, a point will be inserted exactly at middle of the line.

Selecting Control Points

To select a control point, just click at the desired control point. To select multiple control points, drag mouse to enclose desired control points.

Moving Control Points

You can click and drag control points around to change their position. To delete them, simply click Backspace or Delete button on your keyboard.

Modifying Control Points

When moving control point, you can hold modifier key for different control point behaviour.

No Modifier: Control points are opposite of each other and have same distance to main point.

vertex none

CMD : Control points are disconnected from each other.

vertex cmd

OPTION : Control points mirror each other, but the distance from control point to main point is different.

vertex opt

SHIFT : Control point is changed by 15 degree.

vertex shift