# g-rectr 标签 API 文档
本文档由 `DeepSeek R1` 模型生成并微调。
---
```mermaid
graph LR
RectRProps --> GraphicBaseProps --> BaseProps
click GraphicBaseProps "./GraphicBaseProps"
click BaseProps "./BaseProps"
```
---
## 接口定义
```typescript
interface RectRProps extends GraphicBaseProps {
/**
* 圆形圆角参数 [左上, 右上, 右下, 左下]
* - 1个值：全角相同
* - 2个值：左上+右下 / 右上+左下
* - 3个值：左上 / 右上+左下 / 右下
* - 4个值：分别设置四个角 左上、右上、左下、右下
*/
circle?: RectRCircleParams;
/**
* 椭圆圆角参数 [x半径, y半径, ...]
* - 1组：全角相同
* - 2组：左上+右下 / 右上+左下
* - 3组：左上 / 右上+左下 / 右下
* - 4组：分别设置四个角 左上、右上、左下、右下
*/
ellipse?: RectREllipseParams;
}
```
---
## 核心行为规则
- **参数限制**：若圆角值超过 `width/height` 的 50% 或为负数，将自动修正：
- 负值 → 修正为 0
- 超过 50% → 修正为 50%
- **参数优先级**：`ellipse` 优先级高于 `circle`
---
## 完整示例集
### 示例 1：统一圆形圆角
```tsx
<g-rectr
loc={[100, 100, 300, 200]} // x,y,width,height
circle={[20]} // 所有角20px半径
fill
fillStyle="#3498db"
/>
```
---
### 示例 2：差异圆形圆角
```tsx
<g-rectr
loc={[500, 200, 250, 150]}
circle={[30, 15, 50, 0]} // 左上30px, 右上15px, 右下50px, 左下0px
stroke
strokeStyle="#2c3e50"
strokeWidth={4}
/>
```
---
### 示例 3：椭圆圆角
```tsx
<g-rectr
loc={[100, 400, 200, 100]}
ellipse={[30, 20, 10, 40]} // 左上+右下(30,20), 右上+左下(10,40)
fillStyle="#e74c3c"
fillRule="nonzero"
/>
```
---
### 示例 4：混合椭圆圆角
```tsx
<g-rectr
loc={[500, 400, 300, 200]}
ellipse={[
80,
50, // 左上：水平80px 垂直50px
40,
100, // 右上：水平40px 垂直100px
120,
30, // 右下：水平120px 垂直30px
60,
80 // 左下：水平60px 垂直80px
]}
fillStyle="#2ecc71"
strokeWidth={2}
/>
```
---
## 参数对照表
### 圆形圆角（circle）参数规则
| 参数数量 | 生效规则 |
| -------- | -------------------------------------------- |
| 1 | 全角相同：`[20] → [20,20,20,20]` |
| 2 | 对角对称：`[10,30] → [10,30,30,10]` |
| 3 | 左上/对角/右下：`[10,20,30] → [10,20,30,20]` |
| 4 | 独立设置四个角：`[10,20,30,40]` |
### 椭圆圆角（ellipse）参数规则
| 参数组数 | 生效规则 |
| -------- | ---------------------------------------------- |
| 1 | 全角相同：`[15,20] → 四角均为15x20` |
| 2 | 对角对称：`[10,5,20,10] → 左上+右下/右上+左下` |
| 3 | 左上/对角/右下：`[10,20,15,5,20,10]` |
| 4 | 独立设置四个角：`[10,20,15,25,20,30,5,10]` |
---
## 错误处理示例
```tsx
// 危险参数示例
<g-rectr
loc={[0, 0, 100, 50]}
circle={[-10, 200]} // 输入 [-10, 200]
stroke={true}
/>
```
**实际生效值**：
- 负值修正：`-10 → 0`
- 超限修正：`200 → min(200, 50/2=25) → 25px`
- 最终参数：`[0,25] → [0,25,25,0]`
---
## 最佳实践建议
1. **响应式圆角**：
```tsx
// 圆角随尺寸变化
<g-rectr
loc={[x, y, width.value, height]}
circle={[width.value * 0.1]} // 圆角为宽度的10%
/>
```