Documentation / @ripl/charts / RibbonState
Interface: RibbonState
Defined in: charts/src/elements/ribbon.ts:16
State interface for a ribbon shape connecting two arc segments via quadratic curves.
Extends
Properties
| Property | Type | Description | Inherited from | Defined in |
|---|---|---|---|---|
cx | number | Centre x of the arc the ribbon spans, in pixels. | - | charts/src/elements/ribbon.ts:18 |
cy | number | Centre y of the arc the ribbon spans, in pixels. | - | charts/src/elements/ribbon.ts:20 |
direction? | Direction | Directionality used when rendering text. | BaseElementState.direction | core/src/context/types.ts:188 |
fill? | string | Fill style (CSS colour, gradient, or pattern) used to paint filled regions. | BaseElementState.fill | core/src/context/types.ts:184 |
filter? | string | CSS filter string applied to subsequent drawing operations (e.g. blur(4px)). | BaseElementState.filter | core/src/context/types.ts:186 |
font? | string | CSS font shorthand used when rendering text. | BaseElementState.font | core/src/context/types.ts:190 |
fontKerning? | FontKerning | Whether font kerning is applied when rendering text. | BaseElementState.fontKerning | core/src/context/types.ts:192 |
globalCompositeOperation? | unknown | Compositing operation controlling how new drawing is blended with existing content. | BaseElementState.globalCompositeOperation | core/src/context/types.ts:196 |
lineCap? | LineCap | Cap style drawn at the endpoints of stroked lines. | BaseElementState.lineCap | core/src/context/types.ts:198 |
lineDash? | number[] | Dash pattern as alternating stroke and gap lengths; empty for a solid line. | BaseElementState.lineDash | core/src/context/types.ts:200 |
lineDashOffset? | number | Distance into the line dash pattern at which dashing begins. | BaseElementState.lineDashOffset | core/src/context/types.ts:202 |
lineJoin? | LineJoin | Join style drawn where two stroked segments meet. | BaseElementState.lineJoin | core/src/context/types.ts:204 |
lineWidth? | number | Width, in pixels, of stroked lines. | BaseElementState.lineWidth | core/src/context/types.ts:206 |
miterLimit? | number | Miter length limit ratio applied to miter line joins. | BaseElementState.miterLimit | core/src/context/types.ts:208 |
opacity? | number | Global alpha applied to everything drawn, from 0 to 1. | BaseElementState.opacity | core/src/context/types.ts:194 |
radius | number | Radius of the arc endpoints, in pixels. | - | charts/src/elements/ribbon.ts:22 |
rotation? | Rotation | Rotation applied to the element's transform, as radians or a deg/rad string. | BaseElementState.rotation | core/src/context/types.ts:234 |
shadowBlur? | number | Gaussian blur radius applied to drawn shadows. | BaseElementState.shadowBlur | core/src/context/types.ts:210 |
shadowColor? | string | Colour of drawn shadows. | BaseElementState.shadowColor | core/src/context/types.ts:212 |
shadowOffsetX? | number | Horizontal offset, in pixels, of drawn shadows. | BaseElementState.shadowOffsetX | core/src/context/types.ts:214 |
shadowOffsetY? | number | Vertical offset, in pixels, of drawn shadows. | BaseElementState.shadowOffsetY | core/src/context/types.ts:216 |
sourceEnd | number | End angle of the source arc, in radians. | - | charts/src/elements/ribbon.ts:26 |
sourceStart | number | Start angle of the source arc, in radians. | - | charts/src/elements/ribbon.ts:24 |
stroke? | string | Stroke style (CSS colour, gradient, or pattern) used to paint outlines. | BaseElementState.stroke | core/src/context/types.ts:218 |
targetEnd | number | End angle of the target arc, in radians. | - | charts/src/elements/ribbon.ts:30 |
targetStart | number | Start angle of the target arc, in radians. | - | charts/src/elements/ribbon.ts:28 |
textAlign? | TextAlignment | Horizontal alignment of text relative to the drawing position. | BaseElementState.textAlign | core/src/context/types.ts:220 |
textBaseline? | TextBaseline | Vertical baseline used when positioning text. | BaseElementState.textBaseline | core/src/context/types.ts:222 |
transformOriginX? | TransformOrigin | Horizontal origin about which rotation and scaling are applied. | BaseElementState.transformOriginX | core/src/context/types.ts:236 |
transformOriginY? | TransformOrigin | Vertical origin about which rotation and scaling are applied. | BaseElementState.transformOriginY | core/src/context/types.ts:238 |
transformScaleX? | number | Horizontal scale factor applied to the element's transform. | BaseElementState.transformScaleX | core/src/context/types.ts:230 |
transformScaleY? | number | Vertical scale factor applied to the element's transform. | BaseElementState.transformScaleY | core/src/context/types.ts:232 |
translateX? | number | Horizontal translation, in pixels, applied to the element's transform. | BaseElementState.translateX | core/src/context/types.ts:226 |
translateY? | number | Vertical translation, in pixels, applied to the element's transform. | BaseElementState.translateY | core/src/context/types.ts:228 |
zIndex? | number | Stacking order used to sort elements during rendering; higher values draw on top. | BaseElementState.zIndex | core/src/context/types.ts:224 |