Arc

An Arc draws a circular or annular (donut) arc segment. It supports inner radius for donut shapes, pad angles for spacing between segments, and provides a getCentroid() method useful for positioning labels.

Example

Usage

import {
    createArc,
} from '@ripl/core';

const arc = createArc({
    fillStyle: '#3a86ff',
    cx: 200,
    cy: 200,
    radius: 100,
    startAngle: 0,
    endAngle: Math.PI,
});

Properties

Property	Type	Required	Description
cx	number	Yes	Center X coordinate
cy	number	Yes	Center Y coordinate
radius	number	Yes	Outer radius
startAngle	number	Yes	Start angle in radians
endAngle	number	Yes	End angle in radians
innerRadius	number	No	Inner radius (creates a donut/annular arc)
padAngle	number	No	Padding angle in radians between segments
borderRadius	number	No	Corner rounding radius

Plus all Element style properties and Shape options.

Methods

getCentroid(alterations?)

Returns the centroid point [x, y] of the arc segment. Useful for positioning labels at the visual center of a pie/donut slice:

const [labelX, labelY] = arc.getCentroid();

You can pass partial state alterations to compute the centroid at a different radius:

const [x, y] = arc.getCentroid({ radius: arc.radius * 1.2 });