Text on a circular arc (textOnCurve)

When textOnCurve is set (TextCurveConfig), EnhancedTextRenderer routes each newline-separated row through renderCurvedLine.

#Activating arc layout

1textOnCurve?: TextCurveConfig;2 3interface TextCurveConfig {4  sweepAngle: number;       // degrees — arc span along which glyphs distribute5  radius?: number;6  up?: boolean;             // default true — bend toward −y (“smile”) vs inverted7  layoutMode?: CurvedTextLayoutMode;8  baselineOffset?: number;  // radial outward shift (pixels)9  startAngleDeg?: number;   // rotate entire arc around anchor (degrees)10}

#Degenerate cases → straight text

If sweepAngle <= 0, sweepAngle >= 360, computeCircularArcPlacements returns null, or there are zero graphemes, the renderer falls back to renderEnhancedTextLine at (x, y) — same styling stack as normal horizontal text.

#Geometry model (lib-next/text/text-curved.ts)

• Graphemes come from Intl.Segmenter when available — combining marks stay attached.
• Horizontal centres along the straight baseline (measureGraphemeCenters) drive proportional spacing along the arc.
• anchor (x, y) is the mid-string anchor on the arc (apex when up: true at startAngleDeg: 0).
• baselineOffset expands/contracts Rdraw = R + baselineOffset without changing angular spacing.

#layoutMode (CurvedTextLayoutMode)

Relates measured typographic width W, user sweep θ, and optional radius (**documented on CurvedTextLayoutMode in types/text.ts):

#Multi-line arcs

text.split('\n') feeds independent arcs. y advances per line by lineHeight * fontSize where lineHeight defaults 1.4 (resolveTextLayout).

#Example — badge arc

1await painter.createText(2  {3    text: 'PREMIUM QUALITY',4    x: 400,5    y: 340,6    font: { size: 28, family: 'Arial' },7    placement: { textAlign: 'center', textBaseline: 'alphabetic' },8    fill: { color: '#fefce8' },9    stroke: { color: '#422006', width: 2 },10    textOnCurve: {11      sweepAngle: 140,12      radius: 220,13      up: true,14      layoutMode: 'clamp',15      startAngleDeg: 0,16      baselineOffset: 4,17    },18  },19  buffer20);

#Interaction with maxWidth

Arc mode does not word-wrap — layout.maxWidth is ignored for branching (textOnCurve wins first). Insert \\n manually if you need stacked arcs.