bdf1/tianta
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity
d6b59f8af2
tianta/_docs/ui-editor.md

864 lines
35 KiB
Markdown
Raw Normal View History

fix bgm, flypoint on 0F, centerFly, etc
2022-11-03 20:37:02 +08:00
# 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)
Reference in New Issue Copy Permalink