Ellipse
Draw an ellipse. Use it for oval markers and illustrations.
Draw a vector ellipse
import { Drawing, Ellipse } from 'kuito';
export function Example() {
return (
<Drawing viewBox={[0, 0, 100, 100]} width={120} height={120} label="Vector example">
<Ellipse cx={50} cy={50} rx={40} ry={25} fill="#2563eb" />
</Drawing>
);
}Behavior
Place this shape inside Drawing. Coordinates use its viewBox, not screen points. Fill and stroke control paint. Shapes are drawing instructions rather than independently accessible native views.
Continue
Read Drawing for a complete workflow. See the complete prop reference for types and documented defaults.
Reference
Signatures
(_props: EllipseProps): KuitoNodeParameters
| Name | Type | Required | Description |
|---|---|---|---|
_props | EllipseProps | Yes | — |
Returns
Props: EllipseProps
Props (including inherited props) 18
| Name | Type | Required | Description |
|---|---|---|---|
cx | number | No | — |
cy | number | No | — |
rx | number | Yes | — |
ry | number | Yes | — |
fill | string | No | A hex color, or none; black by default. |
fillRule | FillRule | No | — |
stroke | string | No | A hex color, or none, the default. |
strokeWidth | number | No | In user units; 1 by default. |
strokeLinecap | StrokeLinecap | No | — |
strokeLinejoin | StrokeLinejoin | No | — |
strokeMiterlimit | number | No | — |
strokeDasharray | readonly number[] | No | Dash and gap lengths in user units, repeated. |
strokeDashoffset | number | No | — |
opacity | number | No | Multiplies with its Groups' opacity. |
translateX | number | No | In user units, then rotate in degrees and scale, about the origin. |
translateY | number | No | — |
scale | number | No | — |
rotate | number | No | — |
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.