An anchor of a link is a point in the reference element that this link wants to reach as its endpoint. (In reality, the reference element is probably in the way - then, it is the job of the connection point function to determine the actual location of the route endpoint with the obstructing reference element taken into account.) Anchors are set via an anchor
property provided within link end definitions (i.e. the objects provided to link.source()
and link.target()
functions). (If the reference object is a Link, JointJS looks at linkAnchor
property instead.)
There are many built-in anchor functions in JointJS:
'center'
- default anchor at center of view bbox'modelCenter'
- anchor at center of model bbox'perpendicular'
- anchor that ensures an orthogonal route to the other endpoint'midSide'
- anchor in the middle of the side of view bbox closest to the other endpoint'bottom'
- anchor in the middle of the bottom side of view bbox'left'
- anchor in the middle of the left side of view bbox'right'
- anchor in the middle of the right side of view bbox'top'
- anchor in the middle of the top side of view bbox'bottomLeft'
- anchor at the bottom-left corner of view bbox'bottomRight'
- anchor at the bottom-right corner of view bbox'topLeft'
- anchor at the top-left corner of view bbox'topRight'
- anchor at the top-right corner of view bboxExample:
link.source(model, {
anchor: {
name: 'midSide',
args: {
rotate: true,
padding: 20
}
}
});
The default anchor function is 'center'
; this can be changed with the defaultAnchor
paper option. Example:
paper.options.defaultAnchor = {
name: 'midSide',
args: {
rotate: true,
padding: 20
}
};
JointJS also contains mechanisms to define one's own custom anchor functions.