mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-10-31 20:24:27 +08:00
174 lines
3.8 KiB
Markdown
174 lines
3.8 KiB
Markdown
# g-path 标签 API 文档
|
||
|
||
本文档由 `DeepSeek R1` 模型生成并微调。
|
||
|
||
---
|
||
|
||
```mermaid
|
||
graph LR
|
||
PathProps --> GraphicBaseProps --> BaseProps
|
||
|
||
click GraphicBaseProps "./GraphicBaseProps"
|
||
click BaseProps "./BaseProps"
|
||
```
|
||
|
||
---
|
||
|
||
## 接口定义
|
||
|
||
```typescript
|
||
interface PathProps extends GraphicBaseProps {
|
||
path?: Path2D; // 自定义路径对象
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 核心属性说明
|
||
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
| -------------- | -------------------------- | ----------- | -------------------------------------------------- |
|
||
| `path` | `Path2D` | - | 自定义矢量路径（支持多路径、贝塞尔曲线等复杂形状） |
|
||
| `fillRule` | `"nonzero"` \| `"evenodd"` | `"evenodd"` | 填充规则（影响路径重叠区域的渲染） |
|
||
| `actionStroke` | `boolean` | `false` | 设为 `true` 时，交互事件仅检测描边区域 |
|
||
|
||
---
|
||
|
||
## 完整示例集
|
||
|
||
### 示例 1：复杂星形路径
|
||
|
||
```tsx
|
||
// 创建五角星路径
|
||
const starPath = new Path2D();
|
||
for (let i = 0; i < 5; i++) {
|
||
const angle = (i * 2 * Math.PI) / 5 - Math.PI / 2;
|
||
const x = 100 + Math.cos(angle) * 50;
|
||
const y = 100 + Math.sin(angle) * 50;
|
||
if (i === 0) starPath.moveTo(x, y);
|
||
else starPath.lineTo(x, y);
|
||
}
|
||
starPath.closePath();
|
||
|
||
<g-path
|
||
x={200}
|
||
y={200}
|
||
path={starPath}
|
||
fill
|
||
stroke
|
||
fillStyle="#f1c40f"
|
||
fillRule="evenodd" // 使用奇偶环绕原则，使中心镂空
|
||
strokeStyle="#e67e22"
|
||
strokeWidth={3}
|
||
/>;
|
||
```
|
||
|
||
**效果说明**：
|
||
|
||
- 使用`evenodd`规则自动产生星形镂空效果
|
||
- 金色填充+橙色描边的五角星
|
||
|
||
---
|
||
|
||
### 示例 2：交互式描边检测
|
||
|
||
```tsx
|
||
import { ref } from 'vue';
|
||
const [clicked, setClicked] = useState(false);
|
||
|
||
const clicked = ref(false);
|
||
|
||
// 创建对话气泡路径
|
||
const bubblePath = new Path2D();
|
||
bubblePath.moveTo(50, 20);
|
||
bubblePath.quadraticCurveTo(25, 0, 0, 20);
|
||
bubblePath.quadraticCurveTo(25, 40, 50, 20);
|
||
bubblePath.rect(0, 20, 200, 100);
|
||
|
||
const click = () => void (clicked.value = !click.value);
|
||
|
||
<g-path
|
||
path={bubblePath}
|
||
fillStyle={clicked.value ? '#ffffff' : '#ecf0f1'}
|
||
strokeStyle="#bdc3c7"
|
||
strokeWidth={2}
|
||
actionStroke // 仅描边区域可交互
|
||
onClick={click}
|
||
/>;
|
||
```
|
||
|
||
**交互特性**：
|
||
|
||
- 点击描边区域切换填充颜色
|
||
- 内部区域不响应点击事件
|
||
|
||
---
|
||
|
||
### 示例 3：组合路径（齿轮造型）
|
||
|
||
```tsx
|
||
const gearPath = new Path2D();
|
||
// 主体圆形
|
||
gearPath.arc(100, 100, 80, 0, Math.PI * 2);
|
||
// 添加8个齿牙
|
||
for (let i = 0; i < 8; i++) {
|
||
const angle = ((Math.PI * 2) / 8) * i;
|
||
gearPath.moveTo(100 + Math.cos(angle) * 90, 100 + Math.sin(angle) * 90);
|
||
gearPath.lineTo(
|
||
100 + Math.cos(angle + Math.PI / 8) * 110,
|
||
100 + Math.sin(angle + Math.PI / 8) * 110
|
||
);
|
||
gearPath.lineTo(
|
||
100 + Math.cos(angle - Math.PI / 8) * 110,
|
||
100 + Math.sin(angle - Math.PI / 8) * 110
|
||
);
|
||
}
|
||
|
||
<g-path
|
||
path={gearPath}
|
||
fill
|
||
stroke
|
||
fillStyle="#2c3e50"
|
||
fillRule="nonzero" // 非零规则填充
|
||
strokeStyle="#34495e"
|
||
strokeWidth={5}
|
||
lineJoin="miter" // 尖角连接
|
||
/>;
|
||
```
|
||
|
||
---
|
||
|
||
## 高级用法示例
|
||
|
||
### SVG 路径转换
|
||
|
||
```tsx
|
||
// 将SVG路径转换为Path2D
|
||
const svgPath = 'M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80';
|
||
const path = new Path2D(svgPath);
|
||
|
||
<g-path
|
||
path={path}
|
||
stroke
|
||
strokeStyle="#e74c3c"
|
||
strokeWidth={3}
|
||
lineDash={[10, 5]}
|
||
lineCap="round"
|
||
/>;
|
||
```
|
||
|
||
---
|
||
|
||
## 注意事项
|
||
|
||
1. **路径闭合**：
|
||
|
||
```tsx
|
||
// 必须显式闭合路径才能正确填充
|
||
const path = new Path2D();
|
||
path.moveTo(0, 0);
|
||
path.lineTo(100, 0);
|
||
path.lineTo(100, 100);
|
||
path.closePath(); // 关键闭合操作
|
||
```
|