| 33 | |
| 34 | @nodeName('Rect') |
| 35 | export class Rect extends Curve { |
| 36 | /** |
| 37 | * Rounds the corners of this rectangle. |
| 38 | * |
| 39 | * @remarks |
| 40 | * The value represents the radius of the quarter circle that is used to round |
| 41 | * the corners. If the value is a number, the same radius is used for all |
| 42 | * corners. Passing an array of two to four numbers will set individual radii |
| 43 | * for each corner. Individual radii correspond to different corners depending |
| 44 | * on the number of values passed: |
| 45 | * |
| 46 | * ```ts |
| 47 | * // top-left-and-bottom-right | top-right-and-bottom-left |
| 48 | * [10, 30] |
| 49 | * // top-left | top-right-and-bottom-left | bottom-right |
| 50 | * [10, 20, 30] |
| 51 | * // top-left | top-right | bottom-right | bottom-left |
| 52 | * [10, 20, 30, 40] |
| 53 | * ``` |
| 54 | * |
| 55 | * @example |
| 56 | * One uniform radius: |
| 57 | * ```tsx |
| 58 | * <Rect |
| 59 | * size={320} |
| 60 | * radius={40} |
| 61 | * fill={'white'} |
| 62 | * /> |
| 63 | * ``` |
| 64 | * @example |
| 65 | * Individual radii for each corner: |
| 66 | * ```tsx |
| 67 | * <Rect |
| 68 | * size={320} |
| 69 | * radius={[10, 20, 30, 40]} |
| 70 | * fill={'white'} |
| 71 | * /> |
| 72 | * ``` |
| 73 | */ |
| 74 | @spacingSignal('radius') |
| 75 | public declare readonly radius: SpacingSignal<this>; |
| 76 | |
| 77 | /** |
| 78 | * Enables corner smoothing. |
| 79 | * |
| 80 | * @remarks |
| 81 | * This property only affects the way rounded corners are drawn. To control |
| 82 | * the corner radius use the {@link radius} property. |
| 83 | * |
| 84 | * When enabled, rounded corners are drawn continuously using Bézier curves |
| 85 | * rather than quarter circles. The sharpness of the curve can be controlled |
| 86 | * with {@link cornerSharpness}. |
| 87 | * |
| 88 | * You can read more about corner smoothing in |
| 89 | * [this article by Nick Lawrence](https://uxplanet.org/ui-ux-design-corner-smoothing-720509d1ae48). |
| 90 | * |
| 91 | * @example |
| 92 | * ```tsx |
nothing calls this directly
no test coverage detected