Customizing Link Appearance
DiagramLink
-s consist of series of straight or Bezier segments and arrowhead shapes. The link and arrowhead shapes, and also color attributes and text can be customized as detailed below:
Customizing the shape of a link
Your link can be straight or curved and can have one or more segments. Use DiagramLink
shape
to change the shape. It takes as an argument one of the LinkShape
enumeration values:
myLink.shape = LinkShape.Cascading
The link can further be customized by changing its control points - they specify the position of the link. The number of control points per segment depends on the link’s Shape: Bezier links have four control points per segment. Each straight segment has two control points. Adjacent segments share a control point.
The following code sets three control points of a polyline link which has two segments:
myLink.controlPoints = [Point(x: 10, y: 10), Point(x: 30, y: 30), Point(x: 30, y: 50)]
myLink.updateFromPoints()
Always call DiagramLink
updateFromPoints
after you have changed the control points of a link.
Rounded Links
Links comprising straight segments, that is, ones whose shape
is set to Polyline or Cascading, can draw arcs as joints between their adjacent segments. To enable that feature, set roundedLinks
to true. Use roundedLinksRadius
to specify the radius of the joining arcs.
Link Crossings
Intersection points where links cross their paths can be rendered as arcs or cuts, as specified via linkCrossings
. It depends on the Z-order, which links jump over the others, or which links appear cut by the others. If linkCrossings
is set to Arcs, links with higher zIndex
jump over those with lower zIndex
. If set to Cut, links at lower Z position are cut by links at higher Z. Radius of arcs and breaks can be set through the crossingRadius
property.
Customizing arrowheads
Each link can start and end with a Shape
. The shape at the start is specified via the baseShape
property, while the one at the end is set via headShape
:
myLink.headShape = library.shapeFromId("BowArrow")
```swift
The Shape identifiers are also exposed in the [`ShapeLibrary`](Classes/ShapeLibrary.html) class.
## Specifying colors
Link lines are rendered according to [`stroke`](Classes/DiagramItem.html#/s:11Diagramming11DiagramItemC6strokeAA5ColorCvp) and [`strokeThickness`](Classes/DiagramItem.html#/s:11Diagramming11DiagramItemC15strokeThicknessSdvp) attributes. The shapes at the head and base are filled with [`headBrush`](Classes/DiagramLink.html#/s:11Diagramming11DiagramLinkC9headBrushAA0E0CSgvp) and [`baseBrush`](Classes/DiagramLink.html#/s:11Diagramming11DiagramLinkC9baseBrushAA0E0CSgvp) as shown below:
```swift
myLink.headBrush = SolidColorBrush(color: Colors.Red)
Setting text
Use the text
property to set the text label of a link, fontName
specifies the font. Here is an example how to customize the label:
myLink.text = "My Label"
myLink.fontName = "Courier"
myLink.fontSize = 20
The font size is specified in the diagram’s current measure unit, which is millimeter by default.