mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-10-31 12:12:58 +08:00
168 lines
3.6 KiB
Markdown
168 lines
3.6 KiB
Markdown
# 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%
|
||
/>
|
||
```
|