Anchors and contour routing

Loading interactive example…Open in new tab ↗

Opening the live canvas…

Switch routers and target anchors, then move or rotate either shape. Drag curve handles to adjust bends. Bézier handles snap near quarter intervals of the anchor span, with a tolerance that stays constant on screen as you zoom.

An anchor expresses attachment intent. The visible route stops at the occupied shape contour, including when the anchor lies in the center or on a far edge. The example does not draw its own curve, guides, hit regions or arrowheads.

Control / API	Behavior
setConnectorRouter(id, kind)	Changes between straight, orthogonal, quadratic and Bezier; keeps endpoint identities and bend intent. Router-specific control points are cleared.
reconnect(id, atStart: false, endpoint: ...)	Updates the target's normalized anchor as one undoable edit.
Center / left / right / top / bottom	Selects (0.5, 0.5), (0, 0.5), (1, 0.5), (0.5, 0) or (0.5, 1) in target-local coordinates. Rotation is resolved by the framework.
Select connection	Shows the router's standard editing controls. Drag the bend handle for curved routes.

Try the right or bottom target anchor while the source remains above-left. The connection must terminate when it reaches the target contour. Undo restores each anchor or router edit separately. Reset restores the selected quadratic fixture.

The source uses a center anchor in this fixture; the target controls demonstrate all five anchors. Orthogonal routing negotiates the bound owners, not arbitrary unrelated obstacles throughout the diagram. Overlapping owners require different handling and are outside this example's fixed layout.

See Connectors for attachment and router configuration.

Source

void setRoutingTarget(DrawingSession session, DiagramPoint anchor) =>
    session.reconnect(
      'route',
      atStart: false,
      endpoint: BoundEndpoint(elementId: 'target', normalizedAnchor: anchor),
    );