Connect points and close the outline. Use it for arrows, badges and filled regions.

Draw a vector polygon

tsx
import { Drawing, Polygon } from 'kuito';

export function Example() {
  return (
    <Drawing viewBox={[0, 0, 100, 100]} width={120} height={120} label="Vector example">
      <Polygon
        points={[
          [50, 10],
          [90, 85],
          [10, 85],
        ]}
        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: PolygonProps): KuitoNode

Paramètres

NomTypeRequisDescription
_propsPolygonPropsOui—

Retourne

KuitoNode

Props: PolygonProps

Props (props héritées incluses) 15

NomTypeRequisDescription
pointsreadonly (readonly [number, number])[]Oui—
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.