Draw a circle. Use it for dots, badges and circular chart markers.

Draw a vector circle

tsx
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.

Référence

Signatures

ts
(_props: CircleProps): KuitoNode

Paramètres

NomTypeRequisDescription
_propsCirclePropsOui—

Retourne

KuitoNode

Props: CircleProps

Props (props héritées incluses) 17

NomTypeRequisDescription
cxnumberNon—
cynumberNon—
rnumberOui—
fillstringNonA hex color, or none; black by default.
fillRuleFillRuleNon—
strokestringNonA hex color, or none, the default.
strokeWidthnumberNonIn user units; 1 by default.
strokeLinecapStrokeLinecapNon—
strokeLinejoinStrokeLinejoinNon—
strokeMiterlimitnumberNon—
strokeDasharrayreadonly number[]NonDash and gap lengths in user units, repeated.
strokeDashoffsetnumberNon—
opacitynumberNonMultiplies with its Groups' opacity.
translateXnumberNonIn user units, then rotate in degrees and scale, about the origin.
translateYnumberNon—
scalenumberNon—
rotatenumberNon—
Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.