Circle
A tradução desta página não existe ou está desatualizada, por isso é mostrada em inglês. Ler em inglês
Draw a circle. Use it for dots, badges and circular chart markers.
Draw a vector circle
import { Drawing, Circle } from 'kuito';
export function Example() {
return (
<Drawing viewBox={[0, 0, 100, 100]} width={120} height={120} label="Vector example">
<Circle cx={50} cy={50} r={35} 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.
Referência
Assinaturas
(_props: CircleProps): KuitoNodeParâmetros
| Nome | Tipo | Obrigatório | Descrição |
|---|---|---|---|
_props | CircleProps | Sim | — |
Devolve
Props: CircleProps
Props (incluindo props herdadas) 17
| Nome | Tipo | Obrigatório | Descrição |
|---|---|---|---|
cx | number | Não | — |
cy | number | Não | — |
r | number | Sim | — |
fill | string | Não | A hex color, or none; black by default. |
fillRule | FillRule | Não | — |
stroke | string | Não | A hex color, or none, the default. |
strokeWidth | number | Não | In user units; 1 by default. |
strokeLinecap | StrokeLinecap | Não | — |
strokeLinejoin | StrokeLinejoin | Não | — |
strokeMiterlimit | number | Não | — |
strokeDasharray | readonly number[] | Não | Dash and gap lengths in user units, repeated. |
strokeDashoffset | number | Não | — |
opacity | number | Não | Multiplies with its Groups' opacity. |
translateX | number | Não | In user units, then rotate in degrees and scale, about the origin. |
translateY | number | Não | — |
scale | number | Não | — |
rotate | number | Não | — |
Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.