@gravity-ui/graph
Version:
Modern graph editor component
36 lines (35 loc) • 1.42 kB
TypeScript
/**
* Generates a smooth curve through a series of points with adjustable corner rounding.
*
* This function creates a `Path2D` object representing a curved line passing through the provided points.
* The curve's corners are rounded based on the specified radius, which is dynamically adjusted
* to fit between points and scaled according to the angle between segments.
*
* @param {Array<{x: number, y: number}>} points - The array of points through which the curve will pass.
* Each point should be an object with `x` and `y` properties.
*
* @param {number} baseRadius - The base radius for rounding corners. The actual radius is adjusted
* dynamically to ensure it fits between points and scales proportionally to the angle between segments.
*
* @returns {Path2D} A `Path2D` object representing the smoothed curve.
*
* @example
* const points = [
* { x: 0, y: 0 },
* { x: 50, y: 100 },
* { x: 100, y: 50 },
* { x: 150, y: 150 },
* ];
* const radius = 20;
* const path = curvePolyline(points, radius);
* ctx.stroke(path);
*
* @remarks
* - If the angle between segments is close to 180°, the rounding will be minimal.
* - The radius is automatically reduced if it cannot fit between points.
* - For two points, the function creates a straight line instead of a curve.
*/
export declare function curvePolyline(points: {
x: number;
y: number;
}[], baseRadius: number): Path2D;