编辑框设计理念

admin

# 编辑框组件文档

## 组件介绍
编辑框是一个功能强大的文本输入组件，基于 PIXI.js 实现，支持多种输入模式（文本、密码、文本域），提供丰富的样式自定义选项和交互功能。

## 主要特性
- 支持三种输入模式：文本、密码、文本域
- 密码模式支持可见性切换按钮
- 支持多种输入类型过滤（数字、字母、中文等）
- 支持最大长度限制
- 支持占位文本
- 支持自定义样式（背景、边框、字体、颜色等）
- 支持动态尺寸调整
- 支持事件监听
- 支持高 DPI 清晰渲染

## 初始化方法
```javascript
var 编辑框实例 = new 编辑框();
编辑框实例.初始化(x, y, 宽度, 高度, 选项);
```

### 参数说明
- `x`: 组件在舞台上的 x 坐标
- `y`: 组件在舞台上的 y 坐标
- `宽度`: 组件宽度
- `高度`: 组件高度
- `选项`: 可选配置对象，包含以下属性：
  ```javascript
  {
      宽度: 200,           // 编辑框宽度
      高度: 40,            // 编辑框高度
      背景颜色: 0xFFFFFF,  // 背景颜色
      背景透明度: 1,       // 背景透明度
      边框颜色: 0x000000,  // 边框颜色
      边框透明度: 1,       // 边框透明度
      边框宽度: 1,         // 边框宽度
      圆角: 0,             // 圆角半径
      字体: 'Arial',       // 字体
      文字大小: 16,        // 文字大小
      行间距: 16,          // 文本域行间距
      文字颜色: 0x000000,  // 文字颜色
      占位文本: '请输入...', // 占位文本
      输入模式: '文本',     // 输入模式: '文本'|'密码'|'文本域'
      眼睛宽度: 24,        // 密码切换按钮图标宽度
      眼睛高度: 16,        // 密码切换按钮图标高度
      眼睛颜色: 0x666666,  // 密码切换按钮描边颜色
      眼睛填充颜色: 0xFFFFFF, // 密码切换按钮填充背景色
      眼睛填充透明度: 0.5, // 密码切换按钮填充透明度
      显示密码切换按钮: true, // 是否显示密码可见切换按钮
      最大长度: 0,         // 最大输入长度，0表示不限制
      输入类型: 0          // 输入内容类型: 0=不限,1=数字,2=字母,3=中文,4=大写字母,5=字母数字,6=字母数字下划线
  }
  ```

## 主要方法

### 1. 内容操作
```javascript
// 设置内容
编辑框实例.设置内容('新内容');

// 获取内容
var 内容 = 编辑框实例.获取内容();
```

### 2. 样式设置
```javascript
// 设置背景颜色
编辑框实例.设置背景颜色(0xFFFFFF, 1);

// 设置边框颜色
编辑框实例.设置边框颜色(0x000000, 1, 2);

// 设置圆角
编辑框实例.设置圆角(5);

// 设置文字大小
编辑框实例.设置文字大小(18);

// 设置文字颜色
编辑框实例.设置文字颜色(0x333333);

// 设置字体
编辑框实例.设置字体('微软雅黑');
```

### 3. 输入模式设置
```javascript
// 设置输入模式
编辑框实例.设置输入模式('密码'); // '文本'|'密码'|'文本域'

// 设置最大长度
编辑框实例.设置最大长度(50);

// 设置输入类型
编辑框实例.设置输入类型(1); // 0=不限,1=数字,2=字母,3=中文,4=大写字母,5=字母数字,6=字母数字下划线

// 设置行间距（文本域模式）
编辑框实例.设置行间距(20);
```

### 4. 密码切换按钮设置
```javascript
// 设置眼睛图标尺寸
编辑框实例.设置眼睛宽高(20, 12);

// 设置眼睛颜色
编辑框实例.设置眼睛颜色(0x333333);

// 设置眼睛填充颜色
编辑框实例.设置眼睛填充颜色(0xFFFFFF, 0.8);

// 设置是否显示密码切换按钮
编辑框实例.设置显示密码切换按钮(true);
```

### 5. 尺寸设置
```javascript
// 设置宽高
编辑框实例.设置宽高(类型, 宽度, 高度);
// 类型: 0=固定尺寸, 1=百分比, 3=最大不超过父容器
```

### 6. 容器和销毁
```javascript
// 获取容器对象
var 容器 = 编辑框实例.获取容器();

// 销毁组件
编辑框实例.销毁();
```

## 事件监听
```javascript
编辑框实例.获取容器().on('事件内容改变', function(内容) {
    console.log('内容已改变：', 内容);
});
```

## 使用示例

### 基本文本输入框
```javascript
var 文本输入框 = new 编辑框();
文本输入框.初始化(100, 100, 200, 40, {
    占位文本: '请输入用户名',
    输入类型: 5, // 字母数字
    最大长度: 20
});
app.stage.addChild(文本输入框.获取容器());
```

### 密码输入框
```javascript
var 密码输入框 = new 编辑框();
密码输入框.初始化(100, 150, 200, 40, {
    输入模式: '密码',
    占位文本: '请输入密码',
    显示密码切换按钮: true,
    眼睛颜色: 0x4a90e2
});
app.stage.addChild(密码输入框.获取容器());
```

### 文本域
```javascript
var 文本域 = new 编辑框();
文本域.初始化(100, 200, 300, 100, {
    输入模式: '文本域',
    占位文本: '请输入详细描述...',
    行间距: 20,
    最大长度: 500
});
app.stage.addChild(文本域.获取容器());
```

### 监听内容变化
```javascript
文本输入框.获取容器().on('事件内容改变', function(内容) {
    console.log('用户输入：', 内容);
    // 可以在这里进行实时验证或其他处理
});
```

## 输入类型说明
- `0`: 不限 - 允许所有字符
- `1`: 数字 - 只允许数字 0-9
- `2`: 字母 - 只允许英文字母 A-Z, a-z
- `3`: 中文 - 只允许中文字符
- `4`: 大写字母 - 只允许大写字母 A-Z
- `5`: 字母数字 - 允许字母和数字
- `6`: 字母数字下划线 - 允许字母、数字和下划线

## 注意事项
1. 组件需要 PIXI.js 环境
2. 密码模式会自动过滤非字母数字字符
3. 文本域模式支持自动换行和滚动
4. 组件会自动处理高 DPI 显示
5. 输入时 DOM 元素会临时覆盖 PIXI 显示
6. 失焦时会自动隐藏 DOM 输入元素

## 常见问题
1. 如何设置默认内容？
   - 使用 `设置内容()` 方法设置初始内容

2. 如何限制输入长度？
   - 使用 `设置最大长度()` 方法设置最大字符数

3. 如何自定义密码切换按钮样式？
   - 使用 `设置眼睛颜色()`、`设置眼睛填充颜色()` 等方法

4. 如何监听内容变化？
   - 监听 `事件内容改变` 事件

5. 如何设置只允许数字输入？
   - 使用 `设置输入类型(1)` 设置数字模式

如果您需要更多帮助或有其他问题，请随时告诉我。

admin

const box = new 编辑框();
box.初始化(50, 50, 200, 40, { 输入偏移X: 10, 输入偏移Y: 6 });
stage.addChild(box.获取容器());

// 或者初始化后再设置
box.设置输入偏移(10, 6);