颜色输入框

admin

颜色输入框 (ColorInput) 使用说明  
==============================

本组件集成了：  
• 左侧可调尺寸的颜色方块（嵌入到输入框内部）  
• 基于 `编辑框` 的文本输入（支持手动键入 `#rrggbb` 或 `0xRRGGBB`）  
• 弹出式颜色拾取器（方向 / 偏移可调）  
• 完整事件机制，外部可实时获知颜色变更  

──────────────────────────────  
1. 快速上手
──────────────────────────────
```js
// ① 创建实例并初始化
const colorInput = new 颜色输入框();
colorInput.初始化({
    默认颜色 : 0xff9933,   // 起始色
    宽度     : 200,        // 组件整体宽
    高度     : 30,         // 高
    色块宽度 : 22,         // 方块宽
    色块高度 : 22,         // 方块高
    间隙     : 6,          // 方块与文字间距
    圆角     : 6,          // 圆角半径
    弹出方向 : 'down',     // down/up/left/right
    弹出偏移X: 0,          // 拾色器额外 X 偏移
    弹出偏移Y: 0           // 拾色器额外 Y 偏移
});

// ② 加入舞台 / 容器
stage.addChild(colorInput.获取容器());

// ③ 监听颜色变化
colorInput.on('颜色改变', (c)=>{
    console.log('颜色改变:', c.hex);   // {rgb, hex, hsv, alpha}
});
```

──────────────────────────────  
2. 主要 API
──────────────────────────────
• `初始化(opts)`  创建组件  
• `获取容器()`   返回 `PIXI.Container` 可直接 addChild  
• `获取颜色()`   返回 `{rgb, hex, hsv, alpha}`  
• `设置颜色(value)` 可传 `0xffcc00` / `'#ffcc00'` / `'0xFFCC00'`  
• `设置弹出参数(dir, offX, offY)`  
  ‒ `dir`：`'down' | 'up' | 'left' | 'right'`  
  ‒ `offX/offY`：相对方向的额外像素偏移  
• `设置对齐方式(dir, offX, offY)`  
  旧版本保留，**仅支持 `'left' / 'right'`**，内部仍调用 `设置弹出参数`  
• `设置色块尺寸(w, h)` 动态修改方块宽高，输入偏移自动同步  
• `设置位置(x, y)`   移动组件  
• `设置宽高(类型, 宽, 高)`  
  0 固定像素 1 百分比/混合 3 最大不超过父容器  
• `销毁()`     资源释放  
• 事件：`'颜色改变'` → `(colorObj)=>{}`  

──────────────────────────────  
3. 常见用法示例
──────────────────────────────
1) 弹出在右侧并向右再偏移 10 px  
```js
colorInput.设置弹出参数('right', 10, 0);
```

2) 把色块改成 32 × 32，并保持组件高度一致  
```js
colorInput.设置色块尺寸(32, 32)
           .设置宽高(0, 240, 32);
```

3) 窗口缩放时按 80 % 宽度自适应  
```js
window.addEventListener('resize', ()=> {
    colorInput.设置宽高(1, '80%', 30);
});
```

4) 手动在输入框键入颜色  
输入完成 6 位十六进制后方块立即更新并触发 `颜色改变` 事件；  
过程中若格式不完整 / 非法将被忽略，不会报错。

──────────────────────────────  
4. 与其他组件联动示例
──────────────────────────────
```js
// 假设有个面板框组件，需要随颜色调整背景
panel.on('颜色改变', ({hex})=>{
    panel.设置背景颜色(parseInt(hex.replace('#','0x')), 1);
});

// 将两者关联
colorInput.on('颜色改变', c=>{
    panel.emit('颜色改变', c);  // 转发
});
```

至此即可轻松在项目中使用和扩展 `颜色输入框`。如需更多定制或发现问题，欢迎继续提出！