mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-10-31 12:12:58 +08:00
78 lines
1.9 KiB
Markdown
78 lines
1.9 KiB
Markdown
# Selection 组件 API 文档
|
||
|
||
本文档由 `DeepSeek R1` 模型生成并微调。
|
||
|
||
---
|
||
|
||
## 核心特性
|
||
|
||
- **动态高亮**：自动呼吸动画效果
|
||
- **双样式模式**：支持图片皮肤或纯色样式
|
||
- **精准定位**：像素级坐标控制
|
||
- **透明度动画**：可定制不透明度变化范围
|
||
|
||
---
|
||
|
||
## Props 属性说明
|
||
|
||
| 属性名 | 类型 | 默认值 | 描述 |
|
||
| ------------ | ------------------ | -------------- | --------------------------------- |
|
||
| `loc` | `ElementLocator` | **必填** | 光标定位 |
|
||
| `winskin` | `ImageIds` | - | 图片资源 ID（优先级最高） |
|
||
| `color` | `CanvasStyle` | `#ddd` | 填充颜色（无皮肤时生效） |
|
||
| `border` | `CanvasStyle` | `gold` | 边框颜色（无皮肤时生效） |
|
||
| `alphaRange` | `[number, number]` | `[0.25, 0.55]` | 不透明度波动范围 [最小值, 最大值] |
|
||
|
||
---
|
||
|
||
## 使用示例
|
||
|
||
### 图片皮肤模式
|
||
|
||
```tsx
|
||
// 使用预加载的游戏皮肤资源
|
||
<Selection
|
||
loc={[120, 80, 160, 24]}
|
||
winskin="winskin.png"
|
||
alphaRange={[0.4, 1.0]}
|
||
/>
|
||
```
|
||
|
||
---
|
||
|
||
### 纯色模式
|
||
|
||
```tsx
|
||
// 自定义颜色方案
|
||
<Selection
|
||
loc={[20, 240, 200, 32]}
|
||
color="rgba(0,128,255,0.2)" // 填充颜色
|
||
border="#00BFFF" // 边框颜色
|
||
alphaRange={[0.5, 0.9]}
|
||
/>
|
||
```
|
||
|
||
---
|
||
|
||
## 注意事项
|
||
|
||
1. **样式优先级**
|
||
同时指定 `winskin` 和颜色参数时：
|
||
|
||
```tsx
|
||
// 以下配置将忽略 color/border 参数
|
||
<Selection winskin="winskin.png" color="red" border="blue" />
|
||
```
|
||
|
||
2. **动画速度**
|
||
呼吸动画固定为 2000ms/周期，暂不支持自定义时长
|
||
|
||
3. **点击反馈**
|
||
建议配合事件系统实现点击效果：
|
||
```tsx
|
||
<container onClick={handleClick}>
|
||
<Selection />
|
||
<text />
|
||
</container>
|
||
```
|