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.

Referenz

Signaturen

ts
(_props: PolygonProps): KuitoNode

Parameter

NameTypErforderlichBeschreibung
_propsPolygonPropsJa—

Rückgabe

KuitoNode

Props: PolygonProps

Props (einschließlich geerbter Props) 15

NameTypErforderlichBeschreibung
pointsreadonly (readonly [number, number])[]Ja—
fillstringNeinA hex color, or none; black by default.
fillRuleFillRuleNein—
strokestringNeinA hex color, or none, the default.
strokeWidthnumberNeinIn user units; 1 by default.
strokeLinecapStrokeLinecapNein—
strokeLinejoinStrokeLinejoinNein—
strokeMiterlimitnumberNein—
strokeDasharrayreadonly number[]NeinDash and gap lengths in user units, repeated.
strokeDashoffsetnumberNein—
opacitynumberNeinMultiplies with its Groups' opacity.
translateXnumberNeinIn user units, then rotate in degrees and scale, about the origin.
translateYnumberNein—
scalenumberNein—
rotatenumberNein—
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.