mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-04-30 11:23:24 +08:00
51 lines
1.3 KiB
Markdown
51 lines
1.3 KiB
Markdown
# Arrow 组件 API 文档
|
||
|
||
本文档由 `DeepSeek R1` 模型生成并微调。
|
||
|
||
---
|
||
|
||
## 核心特性
|
||
|
||
- **两点连线**：通过坐标点绘制任意方向箭头
|
||
- **头部定制**：可调节箭头尖端大小
|
||
- **样式控制**：支持颜色自定义
|
||
|
||
---
|
||
|
||
## Props 属性说明
|
||
|
||
| 属性名 | 类型 | 默认值 | 描述 |
|
||
| ------- | ---------------------------------- | ------ | ----------------------------------------- |
|
||
| `arrow` | `[number, number, number, number]` | 必填 | 箭头坐标 [起点 x, 起点 y, 终点 x, 终点 y] |
|
||
| `head` | `number` | `8` | 箭头头部尺寸（像素） |
|
||
| `color` | `CanvasStyle` | `#fff` | 箭头颜色 |
|
||
|
||
---
|
||
|
||
## 使用示例
|
||
|
||
### 基础箭头
|
||
|
||
```tsx
|
||
// 从 (50, 100) 到 (200, 300) 的基础箭头
|
||
<Arrow arrow={[50, 100, 200, 300]} />
|
||
```
|
||
|
||
### 定制样式
|
||
|
||
```tsx
|
||
// 红色粗箭头（头部尺寸12px）
|
||
<Arrow arrow={[120, 80, 320, 400]} head={12} color="#FF0000" lineWidth={3} />
|
||
```
|
||
|
||
### 虚线箭头
|
||
|
||
```tsx
|
||
// 带虚线效果的箭头
|
||
<Arrow
|
||
arrow={[0, 0, 400, 300]}
|
||
lineDash={[5, 3]} // 5px实线 + 3px间隔
|
||
color="gold"
|
||
/>
|
||
```
|