HumanBreak/docs/api/user-client-modules/组件 Selection.md

Selection 组件 API 文档

本文档由 DeepSeek R1 模型生成并微调。

---

核心特性

• 动态高亮：自动呼吸动画效果
• 双样式模式：支持图片皮肤或纯色样式
• 精准定位：像素级坐标控制
• 透明度动画：可定制不透明度变化范围

---

Props 属性说明

属性名	类型	默认值	描述
loc	ElementLocator	必填	光标定位
winskin	ImageIds	-	图片资源 ID（优先级最高）
color	CanvasStyle	#ddd	填充颜色（无皮肤时生效）
border	CanvasStyle	gold	边框颜色（无皮肤时生效）
alphaRange	[number, number]	[0.25, 0.55]	不透明度波动范围 [最小值, 最大值]

---

使用示例

图片皮肤模式

// 使用预加载的游戏皮肤资源
<Selection
    loc={[120, 80, 160, 24]}
    winskin="winskin.png"
    alphaRange={[0.4, 1.0]}
/>

---

纯色模式

// 自定义颜色方案
<Selection
    loc={[20, 240, 200, 32]}
    color="rgba(0,128,255,0.2)" // 填充颜色
    border="#00BFFF" // 边框颜色
    alphaRange={[0.5, 0.9]}
/>

---

注意事项

1. 样式优先级
   同时指定 winskin 和颜色参数时：

   // 以下配置将忽略 color/border 参数
   <Selection winskin="winskin.png" color="red" border="blue" />
   

2. 动画速度
   呼吸动画固定为 2000ms/周期，暂不支持自定义时长

3. 点击反馈
   建议配合事件系统实现点击效果：

   <container onClick={handleClick}>
       <Selection />
       <text />
   </container>