RectangleProps
Props of Rectangle: its box in user units, corner radii and paint.
Usage
Draw a rectangle.
This type is used by Rectangle
// Draw a rectangle.
import { Drawing, Rectangle } from 'kuito';
<Drawing label="Card" viewBox={[0, 0, 40, 24]} width={80} height={48}>
<Rectangle x={1} y={1} width={38} height={22} rx={4} fill="#5b5bd6" stroke="#3e3e9f" />
</Drawing>;Type declaration
export interface RectangleProps extends ShapePaint {
x?: number;
y?: number;
width: number;
height: number;
/** Corner radii; each defaults to the other, as SVG's do. */
rx?: number;
ry?: number;
}Members 20
| Name | Type | Required | Description |
|---|---|---|---|
x | number | No | — |
y | number | No | — |
width | number | Yes | — |
height | number | Yes | — |
rx | number | No | Corner radii; each defaults to the other, as SVG's do. |
ry | number | No | — |
fill | string | No | A hex color, or none; black by default. |
fillRule | FillRule | No | — |
stroke | string | No | A hex color, or none, the default. |
strokeWidth | number | No | In user units; 1 by default. |
strokeLinecap | StrokeLinecap | No | — |
strokeLinejoin | StrokeLinejoin | No | — |
strokeMiterlimit | number | No | — |
strokeDasharray | readonly number[] | No | Dash and gap lengths in user units, repeated. |
strokeDashoffset | number | No | — |
opacity | number | No | Multiplies with its Groups' opacity. |
translateX | number | No | In user units, then rotate in degrees and scale, about the origin. |
translateY | number | No | — |
scale | number | No | — |
rotate | number | No | — |
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.