预览器文档

文档创建者:admin
浏览次数:117
最后更新:2025-07-28
以下是 `my/yulanqi.js`(项目预览框)组件的详细使用 API 文档,涵盖其构造方法、初始化、主要功能方法、参数说明、事件与回调等:

---

# 项目预览框(yulanqi.js)API 文档

## 1. 构造与初始化

### 构造函数

```js
const 预览框 = new 项目预览框();
```

### 初始化

```js
预览框.初始化(app, sceneFrame, [折叠状态回调]);
```

- **app**:PIXI.Application 实例(主 PIXI 应用)
- **sceneFrame**:场景框实例(需包含舞台容器等属性)
- **折叠状态回调**(可选):`function(展开状态)`,展开状态为 `true` 表示展开,`false` 表示折叠

---

## 2. 主要方法

### 2.1 显示与隐藏

- `预览框.显示()`
  - 显示预览框
- `预览框.隐藏()`
  - 隐藏预览框

### 2.2 销毁

- `预览框.销毁()`
  - 移除事件监听,销毁所有 PIXI 对象,清理定时器

### 2.3 位置与尺寸

- `预览框.设置位置(x, y)`
  - 设置预览框左上角在主舞台的位置(像素)

- `预览框.设置宽高(mode, width, height)`
  - 设置预览框宽高
    - `mode`:
      - `0`:绝对像素(width, height 为数值)
      - `1`:百分比(width, height 可为 "80%" 字符串)
    - 兼容旧写法:`预览框.设置宽高(width, height)`,等价于 mode=0

### 2.4 折叠/展开相关

- `预览框.折叠()`
  - 折叠预览框,仅显示折叠按钮

- `预览框.展开()`
  - 展开预览框,恢复全部内容显示

- `预览框.获取展开状态()`
  - 返回当前是否为展开状态(`true` 展开,`false` 折叠)

- `预览框.设置折叠状态回调(fn)`
  - 设置折叠/展开状态变化时的回调函数,参数为 `true`(展开)或 `false`(折叠)

### 2.5 预览内容同步

- `预览框.强制同步()`
  - 强制将主场景内容同步到预览器(如遇到同步异常可手动调用)

- `预览框.重建预览器()`
  - 重新克隆主场景内容,重建预览舞台(如遇到结构性变化可手动调用)

---

## 3. 主要功能说明

- **设备分辨率预览**:支持多种移动设备、平板、PC 分辨率切换,支持旋转、缩放。
- **实时同步**:主场景对象变动(增删改、层级、属性)会自动同步到预览舞台。
- **对象微调**:在预览器中点击对象后,可用方向键微调其坐标,改动会同步回主场景。
- **折叠/展开**:可折叠为极简模式,仅保留一个按钮,节省屏幕空间。
- **状态栏/底栏**:模拟移动设备顶部状态栏和底部栏(底栏为简化版)。

---

## 4. 事件与回调

- **折叠状态回调**  
  初始化或通过 `设置折叠状态回调` 传入,签名如下:
  ```js
  function(展开状态) {
    // 展开状态为 true 表示展开,false 表示折叠
  }
  ```

---

## 5. 典型用法示例

```js
const 预览框 = new 项目预览框();
预览框.初始化(app, sceneFrame, function(isExpanded){
    console.log('预览框展开状态:', isExpanded);
});
预览框.设置位置(100, 50);
预览框.设置宽高(0, 400, 700); // 绝对像素
// 或
预览框.设置宽高(1, "80%", "90%"); // 百分比

// 折叠/展开
预览框.折叠();
预览框.展开();
console.log(预览框.获取展开状态());

// 强制同步
预览框.强制同步();
```

---

## 6. 其他说明

- 设备分辨率、旋转、缩放等操作均可通过界面按钮完成。
- 预览框会自动监听主场景对象的增删、属性变化、选中变化等事件,保持实时同步。
- 方向键微调仅对当前在预览器中选中的对象生效,并同步回主场景。

---

如需更详细的参数或扩展用法,可查阅源码注释或补充具体需求!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则