Customizing Link Appearance

DiagramLinks-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 link geometry

Links can be straight or curved and can contain one or more segments. Set DiagramLink.shape to change the shape. It takes as an argument one of the LinkShape enumeration values:

JavaScript

myLink.shape = LinkShape.Cascading;

The link can be customized further by changing its controlPoints array, whose elements specify the position of the link segments. 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 results in two segments:

JavaScript

var Point = MindFusion.Drawing.Point;
myLink.controlPoints = [new Point(10, 10), new Point(30, 30), new Point(30, 50)];

Note
Always call DiagramLink.updateFromPoints() after you change coordinates of individual control points in the array.

Rounded Links

Links comprising straight segments (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 the arrowheads

Each link can display arrowhead shapes at its ends. The shape at the start is specified via baseShape property, the shape at the end is specified via headShape. Arrowheads can also be displayed at middles of segments, helping users follow the path of long links. They are defined by the intermediateShape property. Arrowhead values can be set to either a Shape instance or a string that identifies it:

JavaScript

myLink.headShape = "BowArrow";

Shape objects designed specifically as arrowheads are exposed as static members of the ArrowHeads class.

Specifying colors

Link segments are rendered according to stroke, strokeThickness and strokeDashStyle attributes. The arrowheads at the head and base are filled using headBrush and baseBrush properties:

JavaScript

// paints the link head with red brush
myLink.headBrush = "Red";

Setting text

Set the text property to specify text label of a link, and font to customize its font. Here is an example how to do this:

JavaScript

myLink.text = "myLabel";var Font = MindFusion.Drawing.Font;// the bool arguments specify whether the font is bold and italic
myLink.font = new Font("sans-serif", 5, true, false);

The font size is specified in the diagram's current measure unit, which is millimeter by default.

Apart from main text content, the LinkLabel class lets you display additional labels and pin them to link's points or segments. Call the addLabel method to create such supplementary labels, and use LinkLabel (and base ItemLabel) properties and methods to customize their appearance and position.