Rectangle
Die Übersetzung dieser Seite fehlt oder ist veraltet, daher wird sie auf Englisch angezeigt. Auf Englisch lesen
Draw a rectangle or rounded rectangle. Use it for chart bars and diagram blocks.
Draw a vector rectangle
import { Drawing, Rectangle } from 'kuito';
export function Example() {
return (
<Drawing viewBox={[0, 0, 100, 100]} width={120} height={120} label="Vector example">
<Rectangle x={10} y={20} width={80} height={60} rx={8} 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
(_props: RectangleProps): KuitoNodeParameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
_props | RectangleProps | Ja | — |
Rückgabe
Props: RectangleProps
Props (einschließlich geerbter Props) 20
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
x | number | Nein | — |
y | number | Nein | — |
width | number | Ja | — |
height | number | Ja | — |
rx | number | Nein | Corner radii; each defaults to the other, as SVG's do. |
ry | number | Nein | — |
fill | string | Nein | A hex color, or none; black by default. |
fillRule | FillRule | Nein | — |
stroke | string | Nein | A hex color, or none, the default. |
strokeWidth | number | Nein | In user units; 1 by default. |
strokeLinecap | StrokeLinecap | Nein | — |
strokeLinejoin | StrokeLinejoin | Nein | — |
strokeMiterlimit | number | Nein | — |
strokeDasharray | readonly number[] | Nein | Dash and gap lengths in user units, repeated. |
strokeDashoffset | number | Nein | — |
opacity | number | Nein | Multiplies with its Groups' opacity. |
translateX | number | Nein | In user units, then rotate in degrees and scale, about the origin. |
translateY | number | Nein | — |
scale | number | Nein | — |
rotate | number | Nein | — |
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.