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.
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
Border contains additional child attributes
- Border start: Value in fraction to start drawing path. Value is from 0 – 1.
- Border end: Value in fraction to end drawing path. Value is from 0 – 1.
- Border width: The path stroke width
- 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.
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