# UI编辑器

## 基础操作

打开编辑界面后即可编辑,通过添加新操作可以向ui中添加新的内容。点击一个操作后可以选中该操作,被选中的操作将呈现黄色,可按住ctrl多选。此时点击鼠标右键,可以打开右键菜单,包括在上方插入、复制等操作。执行在上方或下方插入时,会在鼠标点击的操作上方或下方插入,执行复制或剪切时会复制或剪切所有被选中的操作,被剪切的操作将会呈现灰色。当ui编辑到一半时,可以点击保存按钮进行保存,当ui未保存时,保存按钮应当显示为黄色,点击保存后,如果保存成功,按钮会短暂变成绿色。当ui编辑完成后,可以点击预览按钮从头开始预览ui,确认符合预期后,可以点击编译按钮将操作编译为js代码,然后将该代码按照编译完成的注释操作,将代码放入插件中,在需要的地方插入即可。

## 注意事项

- 设置过渡不会立刻生效,会在下一个动画帧中生效,因此设置之后可能需要大概20~50ms的等待操作
- 画布无法更改名称
- 对于绘制成段文本,如果设置了打字机速度,那么两个该操作不能同时进行
- 临时禁用只对预览有效,编译时被临时禁用的操作仍会被编译
- 遇到问题或bug、建议等请在造塔群及时反馈

## 编译

该操作会将当前编辑器显示的所有操作编译为js代码。编译完成后,应当放到插件中一个形式为`this.xxx = function () { ui内容 }`的函数中,在需要显示该ui时,只需执行代码`core.xxx()`

示例:

```js
// 插件中
this.myUi = function() {
    // 请复制以下内容至插件中以使用
    // 使用案例:
    /* 
    插件中:
    this.showMyUi = function () {
        函数内容
    }
    调用时:
    core.showMyUi();
    */
    var _sprite_0 = new Sprite(100, 100, 100, 100, 200, 'game', '_sprite_0');
    _sprite_0.setCss('display: none;');

    action_0_6();

    function action_0_6() {
        _sprite_0.setCss('display: block;');
        _sprite_0.move(100, 100);
        _sprite_0.resize(100, 100);
        _sprite_0.canvas.style.zIndex = '200';
        core.setAlpha(_sprite_0.context, 0.5);
        core.fillEllipse(_sprite_0.context, 50, 50, 30, 50, 0, '');
        var ctx = _sprite_0.context;
        ctx.moveTo(0, 20);
        ctx.bezierCurveTo(10, 10, 50, 50, 50, 100);
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 5;
        ctx.stoke();
        _sprite_0.context.globalCompositeOperation = 'difference';
        core.fillRect(_sprite_0.context, 0, 0, 100, 100, '');
        setTimeout(action_7_8, 1000);
    }
    function action_7_8() {
        var res = _sprite_0.canvas.style.transition;
        if (res !== '') res += ', ';
        res += 'left 300ms ease-out 0ms';
        _sprite_0.canvas.style.transition = res;
        setTimeout(action_9_9, 50);
    }
    function action_9_9() {
        _sprite_0.resize(100, 100, true);
    }
}

// 需要显示ui时
core.myUi();
```

## 预览

预览分为两种,一种是编辑时的即时预览,这种预览会显示所有的画布,并无视等待和删除,确保你能够看到所有的绘制内容,如果你想要隐藏某个操作,可以打开该操作的详细信息,然后将临时禁用勾上,这样就能隐藏该操作了。

第二种是点击预览按钮时发生的,这种预览会尽可能地还原编译后的执行结果,让你能够完整地预览ui。

## 保存

显而易见,该操作可以保存现在正在编辑的ui。注意,ui会保存在样板根目录下的_ui文件夹,以base64的形式进行保存。当你编辑了ui时,保存按钮会呈现黄色,说明此时你还没有保存,此时切出编辑页面会弹出提示。点击保存后,会出现短暂的保存中字样(保存快的话可能看不清),如果保存成功,会出现成功字样,并会将背景短暂地改成绿色

## 临时禁用

该操作可以让你能够禁用某个操作,让你在不删除操作的情况下看到删除之后的效果。该操作只对预览有效,这意味着编译仍会编译被禁用的操作。

## 编辑

### 创建画布

| 事件名称       | 创建画布 |
| ---           | ---      |
| 事件原形       | 创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深)       |
| 功能描述       | 创建一个新的画布        |
| 输入参数 1     | 名称:画布的名称 |
| 输入参数 2     | 横坐标:画布的起点横坐标(左上角)        |
| 输入参数 3     | 纵坐标:画布的起点纵坐标(左上角)        |
| 输入参数 4     | 宽度:画布的宽度        |
| 输入参数 5     | 高度:画布的高度        |
| 输入参数 6     | 纵深:画布的显示优先级,数值越大优先级越高        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 创建画布 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
……
```

### 等待

| 事件名称       | 等待 |
| ---           | ---      |
| 事件原形       | 等待(毫秒数)       |
| 功能描述       | 等待一定时间后再执行后续操作        |
| 输入参数 1     | 毫秒数:等待的时间长度 |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 等待 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
等待(毫秒数);
```

### 设置过渡

| 事件名称       | 设置过渡 |
| ---           | ---      |
| 事件原形       | 设置过渡(作用画布, 作用效果, 过渡时间, 过渡方式, 延迟)       |
| 功能描述       | 指定画布前两个命令之间的渐变式变化        |
| 输入参数 1     | 作用画布:画布的名称 |
| 输入参数 2     | 作用效果:可用于transition的style    |
| 输入参数 3     | 过渡时间:变化的时间长度 |
| 输入参数 4     | 过渡方式:过渡方式,包括ease-out  ease-in  ease-in-out  linear  bezier-curve()等  |
| 输入参数 5     | 延迟:当指定属性变化后,多长时间后开始过渡 |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

| 常见作用效果       | 说明 |
| ---           | ---      |
| left       | x轴方向的位置       |
| top      | y轴方向的位置       |
| opacity    | 不透明度       |
| background-color  | 背景色       |
| transform  | 2D和3D变换       |
| filter     | 滤镜       |
| border     | 边框       |

| 过渡方式       | 说明 |
| ---           | ---      |
| ease-out      | 先快后慢       |
| ease-in       | 先慢后快        |
| ease-in-out   | 慢-快-慢        |
| linear        | 线性变化(匀速)        |
| bezier-curve()  | 指定按照贝塞尔曲线的形式变化,1表示到达终点,0表示起点        |

例:
```js
/* 这是UI编辑器中 设置过渡 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
设置过渡(作用画布, 作用效果, 过渡时间, 过渡方式, 延迟);
移动画布(名称, 横坐标, 纵坐标);
```

### 删除画布

| 事件名称       | 删除画布 |
| ---           | ----------- |
| 事件原形       | 删除画布(作用画布)       |
| 功能描述       | 删除一个已经存在的画布        |
| 输入参数 1     | 作用画布:画布的名称 |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 画布已经存在        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 删除画布 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
删除画布(名称);
```

### 移动画布

| 事件名称       | 移动画布 |
| ---           | ---      |
| 事件原形       | 移动画布(作用画布, 横坐标, 纵坐标, 移动模式)       |
| 功能描述       | 移动指定画布一定指定距离        |
| 输入参数 1     | 作用画布:画布的名称 |
| 输入参数 2     | 横坐标:画布的起点横坐标(左上角)        |
| 输入参数 3     | 纵坐标:画布的起点纵坐标(左上角)        |
| 输入参数 4     | 移动模式:是,则为相对坐标模式,否则为绝对坐标模式 |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

| 移动模式       | 说明 |
| ---           | ---      |
| 绝对坐标       | 横纵坐标为画布移动后左上角的坐标位置       |
| 相对坐标       | 横纵坐标为画布在横向与纵向上移动的距离值        |

例:
```js
/* 这是UI编辑器中 移动画布 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
移动画布(名称, 横坐标, 纵坐标,false);
```

### 缩放画布

| 事件名称       | 缩放画布 |
| ---           | ---      |
| 事件原形       | 缩放画布(作用画布, 宽度, 高度, 修改样式)       |
| 功能描述       | 调整画布至指定尺寸大小        |
| 输入参数 1     | 作用画布:画布的名称 |
| 输入参数 2     | 宽度:画布新的宽度尺寸        |
| 输入参数 3     | 高度:画布新的高度尺寸        |
| 输入参数 4     | 修改样式:如果是,那么只会修改css的长宽,导致模糊,如果不是,那么会修改画布的长宽,清晰,但会清空已绘制内容        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 缩放画布 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
缩放画布(名称, 宽度, 高度, false);
```

### 旋转画布

| 事件名称       | 旋转画布 |
| ---           | ---      |
| 事件原形       | 旋转画布(作用画布, 中心横坐标, 中心纵坐标, 角度)       |
| 功能描述       | 指定画布以指定的中心点旋转一定的角度        |
| 输入参数 1     | 作用画布:画布的名称 |
| 输入参数 2     | 中心横坐标:旋转中心的横坐标        |
| 输入参数 3     | 中心纵坐标:旋转中心的纵坐标       |
| 输入参数 4     | 角度:旋转的角度,正数顺时针旋转,负数逆时针旋转        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 旋转画布 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
旋转画布(名称, 中心横坐标, 中心纵坐标, 角度);
```

### 擦除画布

| 事件名称       | 擦除画布 |
| ---           | ----------- |
| 事件原形       | 擦除画布(作用画布, 横坐标, 纵坐标, 宽度, 高度)       |
| 功能描述       | 擦除画布指定区域内的所有内容        |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 横坐标:区域的起点横坐标(左上角)        |
| 输入参数 3     | 纵坐标:区域的起点纵坐标(左上角)        |
| 输入参数 4     | 宽度:区域的宽度        |
| 输入参数 5     | 高度:区域的高度        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

如果不填的话,默认擦除全部

例:
```js
/* 这是UI编辑器中 擦除画布 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
擦除画布(名称, 横坐标, 纵坐标, 宽度, 高度);
```

### 设置CSS效果

| 事件名称       | 设置CSS效果 |
| ---           | ----------- |
| 事件原形       | 设置CSS效果(作用画布, CSS效果)       |
| 功能描述       | 修改指定画布的样式        |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | CSS效果:编辑框内输入自定义的CSS效果       |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

| 常用CSS效果     | 说明 |
| ---           | ---      |
| opacity         | 不透明度,一个浮点型数字,在0~1区间内       |
| background-color | 背景色,可以使用`#rgba  #rrggbbaa  #rgb  #rrggbb  rgb(r,g,b)  rgba(r,g,b,a)  英文单词`共7种形式  |
| background-image | 背景图片,可使用`url(project/images/image.png)`的形式  |
| box-shadow      | 元素阴影,形式为 `x偏移 y偏移 阴影大小 颜色, x偏移 y偏移 阴影大小 颜色`  |
| transform       | 元素的2D和3D转换,用法过多,请百度搜索或在mdn搜索  |
| filter          | 元素滤镜,同上  |

例:
```js
/* 这是UI编辑器中 设置CSS效果 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
设置CSS效果(名称, CSS效果);
```

### 设置混合方式

| 事件名称       | 设置混合方式 |
| ---           | ----------- |
| 事件原形       | 设置混合方式(作用画布, 混合方式)       |
| 功能描述       | 设置新绘制的内容与已绘制的内容间的叠加方式        |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 混合方式:设置画布的混合方式        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

混合方式说明:包括`color color-burn color-dodge copy darken destination-atop destination-in destination-out destination-over difference exclusion hard-light hue lighten lighter luminosity multiply overlay saturation screen soft-light source-atop source-in source-out source-over xor`共26种,默认为source-over,其余效果请自行百度或尝试

例:
```js
/* 这是UI编辑器中 设置混合方式 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
设置混合方式(名称, 混合方式);
```

### 设置绘制滤镜

| 事件名称       | 设置绘制滤镜 |
| ---           | ----------- |
| 事件原形       | 设置绘制滤镜(作用画布, 滤镜)       |
| 功能描述       | 设置在绘制时的滤镜,不影响已绘制内容        |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 滤镜:编辑框内输入自定义的滤镜        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

| 常见滤镜       | 说明 |
| ---           | ---      |
| blur         | 高斯模糊,用法示例:blur(5px)       |
| brightness   | 亮度,100%为原始亮度,用法示例:brightness(120%)  |
| contrast     | 对比度,100%为原始对比度,用法示例:contrast(80%)  |
| grayscale    | 灰度,0%为原始灰度,设为100%将会变成黑白,用法示例:grayscale(75%)  |
| opacity      | 不透明度,100%为原始不透明度,设为0%将会完全透明,用法示例:opacity(80%)  |

滤镜填写示例:`blur(5px)brightness(120%)grayscale(50%)`,注意会完全覆盖之前的效果,也就是说之前的效果会全部失效

例:
```js
/* 这是UI编辑器中 设置绘制滤镜 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
设置绘制滤镜(名称, 滤镜);
```

### 设置阴影

| 事件名称       | 设置阴影 |
| ---           | ----------- |
| 事件原形       | 设置阴影(作用画布, 阴影模糊, 阴影颜色, 阴影横坐标, 阴影纵坐标)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 阴影模糊:阴影的高斯模糊,与设置绘制滤镜的blur相同        |
| 输入参数 3     | 阴影颜色:与设置css效果中对background-color的描述相同        |
| 输入参数 4     | 阴影横坐标:阴影偏移绘制位置的横坐标        |
| 输入参数 5     | 阴影纵坐标:阴影偏移绘制位置的纵坐标        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 设置阴影 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
设置阴影(名称, 阴影模糊, 阴影颜色, 宽度, 高度);
```

### 设置文本属性

| 事件名称       | 设置文本属性 |
| ---           | ----------- |
| 事件原形       | 设置文本属性(作用画布, 文本方向, 文本对齐, 文本基线)       |
| 功能描述       | 设置文本方向、文本对齐、文本基线        |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 文本方向:文字阅读的方向       |
| 输入参数 3     | 文本对齐:文本水平对齐的方向       |
| 输入参数 4     | 文本基线:文本竖直对齐的方向       |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

| 文本方向       | 说明 |
| ---           | ---      |
| ltr           | 从左往右       |
| rtl           | 从右往左       |

| 文本对齐       | 说明 |
| ---           | ---      |
| left          | 左对齐       |
| center        | 居中对齐       |
| right         | 右对齐       |

| 文本基线       | 说明 |
| ---           | ---      |
| bottom        | 底部对齐       |
| middle        | 居中对齐       |
| top           | 顶部对齐       |

例:
```js
/* 这是UI编辑器中 设置文本信息 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
设置文本属性(名称, 文本方向, 文本对齐, 文本基线);
```

### 设置不透明度

| 事件名称       | 设置不透明度 |
| ---           | ----------- |
| 事件原形       | 设置不透明度(作用画布, 文本不透明度)       |
| 功能描述       | 设置画布之后绘制的不透明度        |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 不透明度:要设置到的不透明度       |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

该操作对已绘制内容没有影响,如果想要对已绘制内容也产生影响,请使用设置css

例:
```js
/* 这是UI编辑器中 设置不透明度 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
设置不透明度(名称, 不透明度);
```

### 保存画布属性

| 事件名称       | 保存画布属性 |
| ---           | ----------- |
| 事件原形       | 保存画布属性(作用画布)       |
| 功能描述       | 保存画布属性,注意之会保存之前设置的属性,如文本属性,不会保存绘制内容        |
| 输入参数 1     | 作用画布:画布的名称        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 保存画布属性 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
保存画布属性(名称);
```

### 回退画布属性

| 事件名称       | 回退画布属性 |
| ---           | ----------- |
| 事件原形       | 回退画布属性(作用画布)       |
| 功能描述       | 回退画布属性,注意只会回退画布的属性,如文本属性,不会回退绘制内容        |
| 输入参数 1     | 作用画布:画布的名称        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 回退画布属性 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
回退画布属性(名称);
```

### 绘制直线

| 事件名称       | 绘制直线 |
| ---           | ----------- |
| 事件原形       | 绘制直线(作用画布, 起点横坐标, 起点纵坐标, 终点横坐标, 终点纵坐标, 连线宽度, 连线颜色)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 起点横坐标:       |
| 输入参数 3     | 起点纵坐标:       |
| 输入参数 4     | 终点横坐标:        |
| 输入参数 4     | 终点纵坐标:       |
| 输入参数 7     | 连线宽度:       |
| 输入参数 8     | 连线颜色:       |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制直线 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制直线(名称, 起点横坐标, 起点纵坐标, 终点横坐标, 终点纵坐标, 连线宽度, 连线颜色);
```

### 绘制弧线

| 事件名称       | 绘制弧线 |
| ---           | ----------- |
| 事件原形       | 绘制弧线(作用画布, 中心横坐标, 中心纵坐标, 半径, 起始弧度, 终止弧度, 是否为边框, 线条宽度, 颜色)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 横坐标        |
| 输入参数 3     | 纵坐标        |
| 输入参数 4     | 半径        |
| 输入参数 4     | 起始弧度        |
| 输入参数 4     | 终止弧度        |
| 输入参数 6     | 是否为边框        |
| 输入参数 7     | 线条宽度        |
| 输入参数 8     | 颜色        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制弧线 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制弧线(名称, 中心横坐标, 中心纵坐标, 半径, 起始弧度, 终止弧度, 是否为边框, 线条宽度, 颜色);
```

### 绘制圆

| 事件名称       | 绘制圆 |
| ---           | ----------- |
| 事件原形       | 绘制圆(作用画布, 中心横坐标, 中心纵坐标, 半径, 是否为边框, 线条宽度, 颜色)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 横坐标        |
| 输入参数 3     | 纵坐标        |
| 输入参数 4     | 半径        |
| 输入参数 6     | 是否为边框        |
| 输入参数 7     | 线条宽度        |
| 输入参数 8     | 颜色        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制圆 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制圆(名称, 中心横坐标, 中心纵坐标, 半径, 是否为边框, 线条宽度, 颜色);
```

### 绘制矩形

| 事件名称       | 绘制矩形 |
| ---           | ----------- |
| 事件原形       | 绘制矩形(作用画布, 横坐标, 纵坐标, 宽度, 高度, 是否为边框, 线条宽度, 颜色)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 横坐标        |
| 输入参数 3     | 纵坐标        |
| 输入参数 4     | 宽度        |
| 输入参数 5     | 高度        |
| 输入参数 6     | 是否为边框        |
| 输入参数 7     | 线条宽度        |
| 输入参数 8     | 颜色        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制矩形 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制矩形(名称, 横坐标, 纵坐标, 宽度, 高度, 是否为边框, 线条宽度, 颜色);
```
### 绘制圆角矩形

| 事件名称       | 绘制圆角矩形 |
| ---           | ----------- |
| 事件原形       | 绘制圆角矩形(作用画布, 横坐标, 纵坐标, 宽度, 高度, 圆角半径, 是否为边框, 线条宽度, 颜色)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 横坐标        |
| 输入参数 3     | 纵坐标        |
| 输入参数 4     | 宽度        |
| 输入参数 5     | 高度        |
| 输入参数 5     | 圆角半径        |
| 输入参数 6     | 是否为边框        |
| 输入参数 7     | 线条宽度        |
| 输入参数 8     | 颜色        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制圆角矩形 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制圆角矩形(名称, 横坐标, 纵坐标, 宽度, 高度, 圆角半径, 是否为边框, 线条宽度, 颜色);
```

### 绘制多边形

| 事件名称       | 绘制多边形 |
| ---           | ----------- |
| 事件原形       | 绘制多边形(作用画布, 是否为边框, 线条宽度, 颜色)       |
| 功能描述       |        |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 是否为边框        |
| 输入参数 3     | 线条宽度        |
| 输入参数 4     | 颜色        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制多边形 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制多边形(名称, 是否为边框, 线条宽度, 颜色);
```

### 绘制椭圆

| 事件名称       | 绘制椭圆 |
| ---           | ----------- |
| 事件原形       | 绘制椭圆(作用画布, 中心横坐标, 中心纵坐标, 半长轴, 半短轴, 旋转角度, 是否为边框, 线条宽度, 颜色)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 中心横坐标        |
| 输入参数 3     | 中心纵坐标        |
| 输入参数 4     | 半长轴        |
| 输入参数 5     | 半短轴        |
| 输入参数 6     | 旋转角度        |
| 输入参数 7     | 是否为边框        |
| 输入参数 8     | 线条宽度        |
| 输入参数 9     | 颜色        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制椭圆 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制椭圆(名称, 中心横坐标, 中心纵坐标, 半长轴, 半短轴, 旋转角度, 是否为边框, 线条宽度, 颜色)
```

### 绘制箭头

| 事件名称       | 绘制箭头 |
| ---           | ----------- |
| 事件原形       | 绘制箭头(作用画布, 起点横坐标, 起点纵坐标, 终点横坐标, 终点纵坐标, 连线宽度, 连线颜色)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 起点横坐标        |
| 输入参数 3     | 起点纵坐标        |
| 输入参数 4     | 终点横坐标        |
| 输入参数 5     | 终点纵坐标        |
| 输入参数 6     | 连线宽度        |
| 输入参数 7     | 连线颜色        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制箭头 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制箭头(名称, 起点横坐标, 起点纵坐标, 终点横坐标, 终点纵坐标, 连线宽度, 连线颜色);
```

### 绘制贝塞尔曲线

| 事件名称       | 绘制贝塞尔曲线 |
| ---           | ----------- |
| 事件原形       | 绘制贝塞尔曲线(作用画布, 控制点1横坐标, 控制点1纵坐标, 控制点2横坐标, 控制点2纵坐标, 起点横坐标, 起点纵坐标, 终点横坐标, 终点纵坐标, 线条宽度, 颜色)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 控制点1横坐标        |
| 输入参数 3     | 控制点1纵坐标        |
| 输入参数 4     | 控制点2横坐标        |
| 输入参数 5     | 控制点2纵坐标        |
| 输入参数 6     | 起点横坐标        |
| 输入参数 7     | 起点纵坐标        |
| 输入参数 8     | 终点横坐标        |
| 输入参数 9     | 终点纵坐标        |
| 输入参数 10    | 线条宽度        |
| 输入参数 11    | 颜色        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制贝塞尔曲线 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制贝塞尔曲线(名称, 控制点1横坐标, 控制点1纵坐标, 控制点2横坐标, 控制点2纵坐标, 起点横坐标, 起点纵坐标, 终点横坐标, 终点纵坐标, 线条宽度, 颜色);
```

### 绘制图片

| 事件名称       | 绘制图片 |
| ---           | ----------- |
| 事件原形       | 绘制图片(作用画布, 图片, 裁切点横坐标, 裁切点纵坐标, 裁切宽度, 裁切高度, 绘制点横坐标, 绘制点纵坐标, 绘制宽度, 绘制高度)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 图片        |
| 输入参数 3     | 裁切点横坐标        |
| 输入参数 4     | 裁切点纵坐标        |
| 输入参数 5     | 裁切宽度        |
| 输入参数 6     | 裁切高度        |
| 输入参数 7     | 绘制点横坐标        |
| 输入参数 8     | 绘制点纵坐标        |
| 输入参数 9     | 绘制宽度        |
| 输入参数 10    | 绘制高度        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制图片 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制图片(名称, 图片, 裁切点横坐标, 裁切点纵坐标, 裁切宽度, 裁切高度, 绘制点横坐标, 绘制点纵坐标, 绘制宽度, 绘制高度);
```

### 绘制图标

| 事件名称       | 绘制图标 |
| ---           | ----------- |
| 事件原形       | 绘制图标(作用画布, 图标id, 横坐标, 纵坐标, 帧数)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 图标id        |
| 输入参数 3     | 横坐标        |
| 输入参数 4     | 纵坐标       |
| 输入参数 5     | 宽度       |
| 输入参数 6     | 高度       |
| 输入参数 7     | 帧数:绘制图标的第几帧        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制图标 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制图标(名称, 图标id, 横坐标, 纵坐标, 帧数);
```

### 绘制窗口皮肤

| 事件名称       | 绘制窗口皮肤 |
| ---           | ----------- |
| 事件原形       | 绘制窗口皮肤(作用画布, 皮肤背景, 横坐标, 纵坐标, 宽度, 高度)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 皮肤背景:需为已注册的图片        |
| 输入参数 3     | 横坐标        |
| 输入参数 4     | 纵坐标        |
| 输入参数 5     | 宽度        |
| 输入参数 6     | 高度        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制窗口皮肤 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制窗口皮肤(名称, 皮肤背景, 横坐标, 纵坐标, 宽度, 高度);
```

### 绘制文本

| 事件名称       | 绘制文本 |
| ---           | ----------- |
| 事件原形       | 绘制文本(作用画布, 文字, 横坐标, 纵坐标, 添加描边, 斜体, 字体, 字体大小, 字体粗细, 字体颜色, 描边颜色, 最大宽度)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 文本        |
| 输入参数 3     | 横坐标        |
| 输入参数 4     | 纵坐标        |
| 输入参数 5     | 添加描边        |
| 输入参数 6     | 斜体        |
| 输入参数 7     | 字体        |
| 输入参数 8     | 字体大小        |
| 输入参数 9     | 字体粗细        |
| 输入参数 10    | 字体颜色        |
| 输入参数 11    | 描边颜色        |
| 输入参数 12    | 最大宽度        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制文本 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制文本(名称, 文字, 横坐标, 纵坐标, 添加描边, 斜体, 字体, 字体大小, 字体粗细, 字体颜色, 描边颜色, 最大宽度);
```

### 绘制成段文本

| 事件名称       | 绘制成段文本 |
| ---           | ----------- |
| 事件原形       | 绘制成段文本(作用画布, 文本, 横坐标, 纵坐标, 宽度, 颜色, 对齐, 字体大小, 行间距, 打字机时间间隔, 字体, 字符间距, 加粗, 斜体)       |
| 功能描述       |         |
| 输入参数 1     | 作用画布:画布的名称        |
| 输入参数 2     | 文本        |
| 输入参数 3     | 横坐标        |
| 输入参数 4     | 纵坐标        |
| 输入参数 5     | 宽度        |
| 输入参数 6     | 颜色       |
| 输入参数 7     | 对齐        |
| 输入参数 8     | 字体大小        |
| 输入参数 9     | 行间距        |
| 输入参数 10    | 打字机时间间隔        |
| 输入参数 11    | 字体        |
| 输入参数 12    | 字符间距        |
| 输入参数 13    | 加粗        |
| 输入参数 14    | 斜体        |
| 输出参数       | 无        |
| 返回值         | 无        |
| 先决条件       | 无        |
| 调用函数       | 无        |

例:
```js
/* 这是UI编辑器中 绘制成段文本 的参考例程 */
创建画布(名称, 横坐标, 纵坐标, 宽度, 高度, 纵深);
绘制成段文本(名称, 文本, 横坐标, 纵坐标, 宽度, 颜色, 对齐, 字体大小, 行间距, 打字机时间间隔, 字体, 字符间距, 加粗, 斜体);
```

==========================================================================================

[继续阅读下一章:API](api)