uievents
This commit is contained in:
oc
parent
01edcfbc98
commit
2586ec9b76
@ -1755,7 +1755,7 @@ config为绘制的配置项，目前可以包括如下几项：
|
||||
- bold：是否粗体。如果不设置默认为false。
|
||||
- align：文字对齐方式，仅在maxWidth设置时有效，默认为'left'。
|
||||
- fontSize：字体大小，如果不设置则使用剧情文本设置中的正文字体大小。
|
||||
- lineHeight：绘制的行距值，如果不设置则使用fontSize*1.3（即1.3被行距）。
|
||||
- lineHeight：绘制的行距值，如果不设置则使用fontSize*1.3（即1.3倍行距）。
|
||||
- time：打字机效果。若不为0，则会逐个字进行绘制，并设置core.status.event.interval定时器。
|
||||
|
||||
|
||||
|
||||
193
_docs/event.md
193
_docs/event.md
@ -1863,6 +1863,199 @@ font可选，如果设置则是要绘制的字体。
|
||||
|
||||
maxWidth可选，如果设置且不为0，则代表要绘制的最大宽度；超过此宽度会自动放缩。
|
||||
|
||||
### fillBoldText：绘制描边文本
|
||||
|
||||
UI绘制事件。
|
||||
|
||||
此项可以绘制一行描边文本。
|
||||
|
||||
```js
|
||||
[
|
||||
{"type": "fillText", "text"："要绘制的描边文本", "x": 10, "y": 20, "style": [255,0,0,1]}
|
||||
]
|
||||
```
|
||||
|
||||
text必填，为要绘制的文本，支持`${}`的写法，不支持一切转义字符或换行符。
|
||||
|
||||
x和y必填，为要绘制的左上角坐标。请使用`setAttribute`来设置绘制的对齐方式和基准线。
|
||||
|
||||
style可选，如果设置需要是三元组RGB或四元组RBGA，代表绘制样式。
|
||||
|
||||
font可选，如果设置则是要绘制的字体。
|
||||
|
||||
### drawTextContent：绘制多行文本
|
||||
|
||||
UI绘制事件。
|
||||
|
||||
此项可以绘制多行文本。
|
||||
|
||||
```js
|
||||
[
|
||||
{"type": "drawTextContent", "text"："要绘制的多行文本", "left": 10, "top": 20, "maxWidth": 100}
|
||||
]
|
||||
```
|
||||
|
||||
text必填，为要绘制的文本，支持所有的文字效果（如\n，${}，\r，\\i等），但不支持支持\t和\b的语法。
|
||||
|
||||
left和top必填，为要绘制的起始像素坐标。实际绘制时会将textBaseline设置为'top'，因此只需要考虑第一个字的左上角位置。
|
||||
|
||||
maxWidth可选，为单行最大宽度，超过此宽度将自动换行，不设置不会自动换行。
|
||||
|
||||
color可选，表示绘制时的颜色，为三元组RGB或四元组RGBA。如果不设置则使用剧情文本设置中的正文颜色。
|
||||
|
||||
bold可选，是否粗体。如果不设置默认为false。
|
||||
|
||||
align可选，文字对齐方式，仅在maxWidth设置时有效，默认为'left'。
|
||||
|
||||
fontSize可选，为字体大小，如果不设置则使用剧情文本设置中的正文字体大小。
|
||||
|
||||
lineHeight可选，绘制的行距值，如果不设置则使用fontSize*1.3（即1.3倍行距）。
|
||||
|
||||
### fillRect：绘制矩形
|
||||
|
||||
UI绘制事件。此项可以绘制一个矩形。
|
||||
|
||||
```js
|
||||
[
|
||||
{"type": "fillRect", "x": 100, "y": 100, "width": 120, "height": 120, "style": [255,0,0,1]}
|
||||
]
|
||||
```
|
||||
|
||||
x, y, width, height必填，为要绘制的起点坐标和宽高；也可以用`flag:xxx`。
|
||||
|
||||
color可选，表示绘制时的颜色，为三元组RGB或四元组RGBA。
|
||||
|
||||
### strokeRect：绘制矩形边框
|
||||
|
||||
UI绘制事件。此项可以绘制一个矩形边框。
|
||||
|
||||
```js
|
||||
[
|
||||
{"type": "strokeRect", "x": 100, "y": 100, "width": 120, "height": 120, "style": [255,0,0,1], "lineWidth": 4}
|
||||
]
|
||||
```
|
||||
|
||||
x, y, width, height必填，为要绘制的起点坐标和宽高；也可以用`flag:xxx`。
|
||||
|
||||
style可选，表示绘制时的颜色，为三元组RGB或四元组RGBA。
|
||||
|
||||
lineWidth可选，表示边框的线宽。
|
||||
|
||||
### drawLine：绘制线段
|
||||
|
||||
UI绘制事件。此事件可以绘制一个函数。
|
||||
|
||||
```js
|
||||
[
|
||||
{"type": "drawLine", "x1": 0, "y1": 0, "x2": "flag:x", "y2": 200, "style": [255,0,0,1]}
|
||||
]
|
||||
```
|
||||
|
||||
x1, y1, x2, x2必填，为要绘制的起点和终点坐标；也可以用`flag:xxx`的写法。
|
||||
|
||||
style可选，表示绘制时的颜色，为三元组RGB或四元组RGBA。
|
||||
|
||||
lineWidth可选，表示边框的线宽。
|
||||
|
||||
### drawArrow：绘制箭头
|
||||
|
||||
UI绘制事件。此事件可以绘制一个箭头。
|
||||
|
||||
参数和写法与`drawLine`完全一致，只不过是会多画一个箭头标记。
|
||||
|
||||
### fillPolygon：绘制多边形
|
||||
|
||||
UI绘制事件。此事件可以绘制一个多边形。
|
||||
|
||||
```js
|
||||
[
|
||||
{"type": "fillPolygon", "nodes": [[0,0],[0,100],[100,0]], "style": [255,0,0,1]}
|
||||
]
|
||||
```
|
||||
|
||||
nodes必填，为一个二维数组，其中每一项都是多边形一个顶点坐标。（与显示/隐藏事件写法相同）
|
||||
|
||||
style可选，表示绘制时的颜色，为三元组RGB或四元组RGBA。
|
||||
|
||||
### strokePolygon：绘制多边形边框
|
||||
|
||||
UI绘制事件。此事件可以绘制一个多边形边框。
|
||||
|
||||
参数列表和`fillPolygon`基本相同，不过多了一个`lineWidth`表示的绘制线宽。
|
||||
|
||||
### drawImage：绘制图片
|
||||
|
||||
UI绘制事件。此事件可以绘制一个图片。
|
||||
|
||||
```js
|
||||
[
|
||||
{"type": "drawImage", "image": "bg.jpg", "x": 0, "y": 0}, // 在(0,0)绘制bg.jpg
|
||||
{"type": "drawImage", "image": "bg.jpg", "x": 0, "y": 0, "w": 100, "h": 100}, // 在(0,0)绘制bg.jpg，且放缩到100x100
|
||||
// 裁剪并放缩图片
|
||||
{"type": "drawImage", "image": "bg.jpg", "x": 0, "y": 0, "w": 100, "h": 100, "x1": 0, "y1": 0, "w1": 100, "h1": 100}
|
||||
]
|
||||
```
|
||||
|
||||
image必填，为图片名。图片必须在全塔属性中被注册过。
|
||||
|
||||
此函数有三种写法：
|
||||
|
||||
- 只写x和y：表示要绘制到的位置。
|
||||
- 写x, y, w, h：表示要绘制到的位置，且将图片放缩到指定宽高。
|
||||
- 写x, y, w, h, x1, y1, w1, h1：从原始图片上裁剪[x,y,w,h]的图片，并绘制画布上的[x1,y1,w1,h1]
|
||||
|
||||
可以查看下面的文档以了解各项参数的信息：
|
||||
http://www.w3school.com.cn/html5/canvas_drawimage.asp
|
||||
|
||||
### drawIcon：绘制图标
|
||||
|
||||
UI绘制事件。此事件可以绘制一个图标。
|
||||
|
||||
```js
|
||||
[
|
||||
{"type": "drawIcon", "id": "yellowKey", "x": 100, "y": 100}, // 在(100,100)绘制黄钥匙
|
||||
]
|
||||
```
|
||||
|
||||
id必填，为要绘制的图标ID。可以是一个注册过的图标ID，也可以使用状态栏的图标ID，例如lv, hp, up, save, settings等。
|
||||
|
||||
x, y必填，为要绘制的左上角坐标。width和height可选，如果设置则会将图标放缩成对应的宽高。
|
||||
|
||||
### drawBackground：绘制背景图
|
||||
|
||||
UI绘制事件。此事件可以绘制一个背景图。
|
||||
|
||||
```js
|
||||
[
|
||||
{"type": "drawBackground", "background": "winskin.png", "x": 0, "y": 0, "width": 100, "height": 100},
|
||||
]
|
||||
```
|
||||
|
||||
background必填，为要绘制的背景图内容。其可以是一个三元组RGB或四元组RGBA（纯色绘制），或一个WindowSkin的图片名。
|
||||
|
||||
x, y, width, height必填，分别为要绘制的起点坐标和长宽。
|
||||
|
||||
可以使用“设置画布属性”来设置不透明度和纯色绘制时的边框颜色。
|
||||
|
||||
### drawSelector：绘制闪烁光标
|
||||
|
||||
UI绘制事件。此事件可以绘制闪烁光标。
|
||||
|
||||
```js
|
||||
[
|
||||
{"type": "drawSelector", "image": "winskin.png", "x": 0, "y": 0, "width": 100, "height": 100},
|
||||
{"type": "drawSelector"} // 清除闪烁光标
|
||||
]
|
||||
```
|
||||
|
||||
image为要绘制的WindowSkin图片名；如果不填则视为“清除闪烁光标”。
|
||||
|
||||
x, y, width, height分别为要绘制的起点坐标和长宽。
|
||||
|
||||
请注意，同时只会有一个闪烁光标存在，如果创建多个则后者会替换前者。
|
||||
|
||||
闪烁光标将会一直存在即使事件流结束；请使用本事件并不填`image`来清除闪烁光标。
|
||||
|
||||
### function: 自定义JS脚本
|
||||
|
||||
上述给出了这么多事件，但有时候往往不能满足需求，这时候就需要执行自定义脚本了。
|
||||
|
||||
@ -346,6 +346,20 @@ action
|
||||
| clearMap_1_s
|
||||
| setAttribute_s
|
||||
| fillText_s
|
||||
| fillBoldText_s
|
||||
| drawTextContent_s
|
||||
| fillRect_s
|
||||
| strokeRect_s
|
||||
| drawLine_s
|
||||
| drawArrow_s
|
||||
| fillPolygon_s
|
||||
| strokePolygon_s
|
||||
| drawImage_s
|
||||
| drawImage_1_s
|
||||
| drawIcon_s
|
||||
| drawBackground_s
|
||||
| drawSelector_s
|
||||
| drawSelector_1_s
|
||||
| unknown_s
|
||||
| function_s
|
||||
| pass_s
|
||||
@ -1964,6 +1978,285 @@ var code = '{"type": "fillText", "x": '+PosString_0+', "y": '+PosString_1+EvalSt
|
||||
return code;
|
||||
*/;
|
||||
|
||||
fillBoldText_s
|
||||
: '绘制描边文本' 'x' PosString 'y' PosString '样式' EvalString? Colour '字体' EvalString? BGNL? EvalString Newline
|
||||
|
||||
/* fillBoldText_s
|
||||
tooltip : fillBoldText：绘制一行描边文本
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=fillBoldText%ef%bc%9a%e7%bb%98%e5%88%b6%e6%8f%8f%e8%be%b9%e6%96%87%e6%9c%ac
|
||||
colour : this.subColor
|
||||
default : ["0","0","",'rgba(255,255,255,1)',"","绘制一行描边文本"]
|
||||
var colorRe = MotaActionFunctions.pattern.colorRe;
|
||||
var fontRe = MotaActionFunctions.pattern.fontRe;
|
||||
if (EvalString_0) {
|
||||
if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
|
||||
EvalString_0 = ', "style": ['+EvalString_0+']';
|
||||
}
|
||||
if (EvalString_1) {
|
||||
if (!fontRe.test(EvalString_1)) throw new Error('字体必须是 [italic] [bold] 14px Verdana 这种形式或不填');
|
||||
EvalString_1 = ', "font": "' + EvalString_1 + '"';
|
||||
}
|
||||
var code = '{"type": "fillBoldText", "x": '+PosString_0+', "y": '+PosString_1+EvalString_0+EvalString_1+', "text": "'+EvalString_2+'"},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
drawTextContent_s
|
||||
: '绘制多行文本' EvalString BGNL? '左上角坐标' 'x' PosString 'y' PosString '最大宽度' EvalString? '颜色' EvalString? Colour BGNL? '对齐' TextAlign_List '字体大小' EvalString? '行距' EvalString? '粗体' Bool Newline
|
||||
|
||||
/* drawTextContent_s
|
||||
tooltip : drawTextContent：绘制多行文本
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=drawTextContent%ef%bc%9a%e7%bb%98%e5%88%b6%e5%a4%9a%e8%a1%8c%e6%96%87%e6%9c%ac
|
||||
colour : this.subColor
|
||||
default : ["绘制多行文本\\n第二行","0","0","","",'rgba(255,255,255,1)',null,"","",false]
|
||||
var colorRe = MotaActionFunctions.pattern.colorRe;
|
||||
TextAlign_List_0 = TextAlign_List_0==='null'?'': ', "align": "'+TextAlign_List_0+'"';
|
||||
Bool_0 = Bool_0 ? (', "bold": true') : '';
|
||||
if (EvalString_1) {
|
||||
if (!/^\d+$/.test(EvalString_1)) throw new Error('最大宽度必须是整数或不填');
|
||||
EvalString_1 = ', "maxWidth": ' + EvalString_1;
|
||||
}
|
||||
if (EvalString_2) {
|
||||
if (!colorRe.test(EvalString_2))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
|
||||
EvalString_2 = ', "color": ['+EvalString_2+']';
|
||||
}
|
||||
if (EvalString_3) {
|
||||
if (!/^\d+$/.test(EvalString_3)) throw new Error('字体大小必须是整数或不填');
|
||||
EvalString_3 = ', "fontSize": ' + EvalString_3;
|
||||
}
|
||||
if (EvalString_4) {
|
||||
if (!/^\d+$/.test(EvalString_4)) throw new Error('行距必须是整数或不填');
|
||||
EvalString_4 = ', "lineHeight": ' + EvalString_4;
|
||||
}
|
||||
var code = '{"type": "drawTextContent", "text": "'+EvalString_0+'", "left": '+PosString_0+', "top": '+PosString_1+TextAlign_List_0+EvalString_1+EvalString_2+EvalString_3+EvalString_4+Bool_0+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
fillRect_s
|
||||
: '绘制矩形' '起点像素坐标' 'x' PosString 'y' PosString '宽' PosString '高' PosString '颜色' EvalString? Colour Newline
|
||||
|
||||
/* fillRect_s
|
||||
tooltip : fillRect：绘制矩形
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=fillRect%ef%bc%9a%e7%bb%98%e5%88%b6%e7%9f%a9%e5%bd%a2
|
||||
colour : this.subColor
|
||||
default : ["0","0","flag:x","300","",null]
|
||||
var colorRe = MotaActionFunctions.pattern.colorRe;
|
||||
if (EvalString_0) {
|
||||
if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
|
||||
EvalString_0 = ', "style": ['+EvalString_0+']';
|
||||
}
|
||||
var code = '{"type": "fillRect", "x": '+PosString_0+', "y": '+PosString_1+', "width": '+PosString_2+', "height": '+PosString_3+EvalString_0+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
strokeRect_s
|
||||
: '绘制矩形边框' '起点像素坐标' 'x' PosString 'y' PosString '宽' PosString '高' PosString '颜色' EvalString? Colour '线宽' EvalString? Newline
|
||||
|
||||
/* strokeRect_s
|
||||
tooltip : strokeRect：绘制矩形边框
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=strokeRect%ef%bc%9a%e7%bb%98%e5%88%b6%e7%9f%a9%e5%bd%a2%e8%be%b9%e6%a1%86
|
||||
colour : this.subColor
|
||||
default : ["0","0","flag:x","300","",null,""]
|
||||
var colorRe = MotaActionFunctions.pattern.colorRe;
|
||||
if (EvalString_0) {
|
||||
if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
|
||||
EvalString_0 = ', "style": ['+EvalString_0+']';
|
||||
}
|
||||
if (EvalString_1) {
|
||||
if (!/^\d+$/.test(EvalString_1))throw new Error('线宽必须是整数或不填');
|
||||
EvalString_1 = ', "lineWidth": '+EvalString_1;
|
||||
}
|
||||
var code = '{"type": "strokeRect", "x": '+PosString_0+', "y": '+PosString_1+', "width": '+PosString_2+', "height": '+PosString_3+EvalString_0+EvalString_1+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
drawLine_s
|
||||
: '绘制线段' '起点像素坐标' 'x' PosString 'y' PosString '终点像素坐标' 'x' PosString 'y' PosString '颜色' EvalString? Colour '线宽' EvalString? Newline
|
||||
|
||||
/* drawLine_s
|
||||
tooltip : drawLine：绘制线段
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=drawLine%ef%bc%9a%e7%bb%98%e5%88%b6%e7%ba%bf%e6%ae%b5
|
||||
colour : this.subColor
|
||||
default : ["0","0","flag:x","300","",null,""]
|
||||
var colorRe = MotaActionFunctions.pattern.colorRe;
|
||||
if (EvalString_0) {
|
||||
if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
|
||||
EvalString_0 = ', "style": ['+EvalString_0+']';
|
||||
}
|
||||
if (EvalString_1) {
|
||||
if (!/^\d+$/.test(EvalString_1))throw new Error('线宽必须是整数或不填');
|
||||
EvalString_1 = ', "lineWidth": '+EvalString_1;
|
||||
}
|
||||
var code = '{"type": "drawLine", "x1": '+PosString_0+', "y1": '+PosString_1+', "x2": '+PosString_2+', "y2": '+PosString_3+EvalString_0+EvalString_1+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
drawArrow_s
|
||||
: '绘制箭头' '起点像素坐标' 'x' PosString 'y' PosString '终点像素坐标' 'x' PosString 'y' PosString '颜色' EvalString? Colour '线宽' EvalString? Newline
|
||||
|
||||
/* drawArrow_s
|
||||
tooltip : drawArrow：绘制箭头
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=drawArrow%ef%bc%9a%e7%bb%98%e5%88%b6%e7%ae%ad%e5%a4%b4
|
||||
colour : this.subColor
|
||||
default : ["0","0","flag:x","300","",null,""]
|
||||
var colorRe = MotaActionFunctions.pattern.colorRe;
|
||||
if (EvalString_0) {
|
||||
if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
|
||||
EvalString_0 = ', "style": ['+EvalString_0+']';
|
||||
}
|
||||
if (EvalString_1) {
|
||||
if (!/^\d+$/.test(EvalString_1))throw new Error('线宽必须是整数或不填');
|
||||
EvalString_1 = ', "lineWidth": '+EvalString_1;
|
||||
}
|
||||
var code = '{"type": "drawArrow", "x1": '+PosString_0+', "y1": '+PosString_1+', "x2": '+PosString_2+', "y2": '+PosString_3+EvalString_0+EvalString_1+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
|
||||
fillPolygon_s
|
||||
: '绘制多边形' '顶点像素列表' 'x' EvalString 'y' EvalString '颜色' EvalString? Colour Newline
|
||||
|
||||
/* fillPolygon_s
|
||||
tooltip : fillPolygon：绘制多边形
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=fillPolygon%ef%bc%9a%e7%bb%98%e5%88%b6%e5%a4%9a%e8%be%b9%e5%bd%a2
|
||||
colour : this.subColor
|
||||
default : ["0,0,100","0,100,0","",null]
|
||||
var colorRe = MotaActionFunctions.pattern.colorRe;
|
||||
var pattern2 = /^([+-]?\d+)(,[+-]?\d+)*$/;
|
||||
if(!pattern2.test(EvalString_0) || !pattern2.test(EvalString_1))throw new Error('坐标格式错误,请右键点击帮助查看格式');
|
||||
EvalString_0=EvalString_0.split(',');
|
||||
EvalString_1=EvalString_1.split(',');
|
||||
if(EvalString_0.length!==EvalString_1.length)throw new Error('坐标格式错误,请右键点击帮助查看格式');
|
||||
for(var ii=0;ii<EvalString_0.length;ii++)EvalString_0[ii]='['+EvalString_0[ii]+','+EvalString_1[ii]+']';
|
||||
if (EvalString_2) {
|
||||
if (!colorRe.test(EvalString_2))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
|
||||
EvalString_2 = ', "style": ['+EvalString_2+']';
|
||||
}
|
||||
var code = '{"type": "fillPolygon", "nodes": ['+EvalString_0+']'+EvalString_2+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
|
||||
strokePolygon_s
|
||||
: '绘制多边形边框' '顶点像素列表' 'x' EvalString 'y' EvalString '颜色' EvalString? Colour '线宽' EvalString? Newline
|
||||
|
||||
/* strokePolygon_s
|
||||
tooltip : strokePolygon：绘制多边形边框
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=strokePolygon%ef%bc%9a%e7%bb%98%e5%88%b6%e5%a4%9a%e8%be%b9%e5%bd%a2%e8%be%b9%e6%a1%86
|
||||
colour : this.subColor
|
||||
default : ["0,0,100","0,100,0","",null,""]
|
||||
var colorRe = MotaActionFunctions.pattern.colorRe;
|
||||
var pattern2 = /^([+-]?\d+)(,[+-]?\d+)*$/;
|
||||
if(!pattern2.test(EvalString_0) || !pattern2.test(EvalString_1))throw new Error('坐标格式错误,请右键点击帮助查看格式');
|
||||
EvalString_0=EvalString_0.split(',');
|
||||
EvalString_1=EvalString_1.split(',');
|
||||
if(EvalString_0.length!==EvalString_1.length)throw new Error('坐标格式错误,请右键点击帮助查看格式');
|
||||
for(var ii=0;ii<EvalString_0.length;ii++)EvalString_0[ii]='['+EvalString_0[ii]+','+EvalString_1[ii]+']';
|
||||
if (EvalString_2) {
|
||||
if (!colorRe.test(EvalString_2))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
|
||||
EvalString_2 = ', "style": ['+EvalString_2+']';
|
||||
}
|
||||
if (EvalString_3) {
|
||||
if (!/^\d+$/.test(EvalString_3))throw new Error('线宽必须是整数或不填');
|
||||
EvalString_3 = ', "lineWidth": '+EvalString_3;
|
||||
}
|
||||
var code = '{"type": "strokePolygon", "nodes": ['+EvalString_0+']'+EvalString_2+EvalString_3+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
drawImage_s
|
||||
: '绘制图片' '图片' EvalString '起点像素' 'x' PosString 'y' PosString '宽' PosString? '高' PosString? Newline
|
||||
|
||||
|
||||
/* drawImage_s
|
||||
tooltip : drawImage：绘制图片
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=drawImage%ef%bc%9a%e7%bb%98%e5%88%b6%e5%9b%be%e7%89%87
|
||||
default : ["bg.jpg","0","0","",""]
|
||||
colour : this.subColor
|
||||
PosString_2 = PosString_2 ? (', "w": '+PosString_2) : '';
|
||||
PosString_3 = PosString_3 ? (', "h": '+PosString_3) : '';
|
||||
var code = '{"type": "drawImage", "image": "'+EvalString_0+'", "x": '+PosString_0+', "y": '+PosString_1+PosString_2+PosString_3+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
drawImage_1_s
|
||||
: '绘制图片' '图片' EvalString BGNL? '裁剪的起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString BGNL?
|
||||
'绘制的起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString Newline
|
||||
|
||||
|
||||
/* drawImage_1_s
|
||||
tooltip : drawImage：绘制图片
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=drawImage%ef%bc%9a%e7%bb%98%e5%88%b6%e5%9b%be%e7%89%87
|
||||
default : ["bg.jpg","0","0","32","32","0","0","32","32"]
|
||||
colour : this.subColor
|
||||
var code = '{"type": "drawImage", "image": "'+EvalString_0+'"'+
|
||||
', "x": '+PosString_0+', "y": '+PosString_1+', "w": '+PosString_2+', "h": '+PosString_3+
|
||||
', "x1": '+PosString_4+', "y1": '+PosString_5+', "w1": '+PosString_6+', "h1": '+PosString_7+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
drawIcon_s
|
||||
: '绘制图标' 'ID' IdString '起点像素' 'x' PosString 'y' PosString '宽' PosString? '高' PosString? Newline
|
||||
|
||||
|
||||
/* drawIcon_s
|
||||
tooltip : drawIcon：绘制图标
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=drawIcon%ef%bc%9a%e7%bb%98%e5%88%b6%e5%9b%be%e6%a0%87
|
||||
default : ["yellowKey","0","0","",""]
|
||||
colour : this.subColor
|
||||
PosString_2 = PosString_2 ? (', "width": '+PosString_2) : '';
|
||||
PosString_3 = PosString_3 ? (', "height": '+PosString_3) : '';
|
||||
var code = '{"type": "drawIcon", "id": "'+IdString_0+'", "x": '+PosString_0+', "y": '+PosString_1+PosString_2+PosString_3+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
drawBackground_s
|
||||
: '绘制背景图' EvalString Colour '起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString Newline
|
||||
|
||||
|
||||
/* drawBackground_s
|
||||
tooltip : drawBackground：绘制背景
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=drawBackground%ef%bc%9a%e7%bb%98%e5%88%b6%e8%83%8c%e6%99%af%e5%9b%be
|
||||
default : ["winskin.png",null,"0","0","100","100"]
|
||||
colour : this.subColor
|
||||
var colorRe = MotaActionFunctions.pattern.colorRe;
|
||||
if (colorRe.test(EvalString_0)) {
|
||||
EvalString_0 = ', "background": ['+EvalString_0+']';
|
||||
}
|
||||
else if (/^\w+\.png$/.test(EvalString_0)) {
|
||||
EvalString_0 = ', "background": "'+EvalString_0+'"';
|
||||
}
|
||||
else {
|
||||
throw new Error('背景格式错误,必须是形如0~255,0~255,0~255,0~1的颜色，或一个WindowSkin的png图片名称');
|
||||
}
|
||||
var code = '{"type": "drawBackground"'+EvalString_0+', "x": '+PosString_0+', "y": '+PosString_1+', "width": '+PosString_2+', "height": '+PosString_3+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
drawSelector_s
|
||||
: '绘制闪烁光标' EvalString Colour '起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString Newline
|
||||
|
||||
|
||||
/* drawSelector_s
|
||||
tooltip : drawSelector：绘制闪烁光标
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=drawSelector%ef%bc%9a%e7%bb%98%e5%88%b6%e9%97%aa%e7%83%81%e5%85%89%e6%a0%87
|
||||
default : ["winskin.png",null,"0","0","100","100"]
|
||||
colour : this.subColor
|
||||
var code = '{"type": "drawSelector", "image": "'+EvalString_0+'", "x": '+PosString_0+', "y": '+PosString_1+', "width": '+PosString_2+', "height": '+PosString_3+'},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
drawSelector_1_s
|
||||
: '清除闪烁光标' Newline
|
||||
|
||||
|
||||
/* drawSelector_1_s
|
||||
tooltip : drawSelector：清除闪烁光标
|
||||
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=showImage%ef%bc%9a%e6%98%be%e7%a4%ba%e5%9b%be%e7%89%87
|
||||
colour : this.subColor
|
||||
var code = '{"type": "drawSelector"},\n';
|
||||
return code;
|
||||
*/;
|
||||
|
||||
unknown_s
|
||||
: '自定义事件' BGNL? RawEvalString
|
||||
|
||||
@ -2948,6 +3241,98 @@ ActionParser.prototype.parseAction = function() {
|
||||
data.x, data.y, data.style, 'rgba('+data.style+')', data.font, data.maxWidth, this.EvalString(data.text), this.next
|
||||
]);
|
||||
break;
|
||||
case "fillBoldText": // 绘制一行描边文本
|
||||
data.style = this.Colour(data.style);
|
||||
this.next = MotaActionBlocks['fillBoldText_s'].xmlText([
|
||||
data.x, data.y, data.style, 'rgba('+data.style+')', data.font, this.EvalString(data.text), this.next
|
||||
]);
|
||||
break;
|
||||
case "drawTextContent": // 绘制多行文本
|
||||
data.color = this.Colour(data.color);
|
||||
this.next = MotaActionBlocks['drawTextContent_s'].xmlText([
|
||||
this.EvalString(data.text), data.left, data.top, data.maxWidth, data.color, 'rgba('+data.color+')',
|
||||
data.align, data.fontSize, data.lineHeight, data.bold, this.next
|
||||
]);
|
||||
break;
|
||||
case "fillRect": // 绘制矩形
|
||||
data.style = this.Colour(data.style);
|
||||
this.next = MotaActionBlocks['fillRect_s'].xmlText([
|
||||
data.x, data.y, data.width, data.height, data.style, 'rgba('+data.style+')', this.next
|
||||
]);
|
||||
break;
|
||||
case "strokeRect": // 绘制矩形边框
|
||||
data.style = this.Colour(data.style);
|
||||
this.next = MotaActionBlocks['strokeRect_s'].xmlText([
|
||||
data.x, data.y, data.width, data.height, data.style, 'rgba('+data.style+')', data.lineWidth, this.next
|
||||
]);
|
||||
break;
|
||||
case "drawLine": // 绘制线段
|
||||
data.style = this.Colour(data.style);
|
||||
this.next = MotaActionBlocks['drawLine_s'].xmlText([
|
||||
data.x1, data.y1, data.x2, data.y2, data.style, 'rgba('+data.style+')', data.lineWidth, this.next
|
||||
]);
|
||||
break;
|
||||
case "drawArrow": // 绘制线段
|
||||
data.style = this.Colour(data.style);
|
||||
this.next = MotaActionBlocks['drawArrow_s'].xmlText([
|
||||
data.x1, data.y1, data.x2, data.y2, data.style, 'rgba('+data.style+')', data.lineWidth, this.next
|
||||
]);
|
||||
break;
|
||||
case "fillPolygon": // 绘制多边形
|
||||
data.style = this.Colour(data.style);
|
||||
var x_str=[],y_str=[];
|
||||
data.nodes.forEach(function (t) {
|
||||
x_str.push(t[0]);
|
||||
y_str.push(t[1]);
|
||||
})
|
||||
this.next = MotaActionBlocks['fillPolygon_s'].xmlText([
|
||||
x_str.join(','), y_str.join(','), data.style, 'rgba('+data.style+')', this.next
|
||||
]);
|
||||
break;
|
||||
case "strokePolygon": // 绘制多边形
|
||||
data.style = this.Colour(data.style);
|
||||
var x_str=[],y_str=[];
|
||||
data.nodes.forEach(function (t) {
|
||||
x_str.push(t[0]);
|
||||
y_str.push(t[1]);
|
||||
})
|
||||
this.next = MotaActionBlocks['strokePolygon_s'].xmlText([
|
||||
x_str.join(','), y_str.join(','), data.style, 'rgba('+data.style+')', data.lineWidth, this.next
|
||||
]);
|
||||
break;
|
||||
case "drawImage": // 绘制图片
|
||||
if (data.x1 != null && data.y1 != null && data.w1 != null && data.h1 != null) {
|
||||
this.next = MotaActionBlocks['drawImage_1_s'].xmlText([
|
||||
data.image, data.x, data.y, data.w, data.h, data.x1, data.y1, data.w1, data.h1, this.next
|
||||
]);
|
||||
}
|
||||
else {
|
||||
this.next = MotaActionBlocks['drawImage_s'].xmlText([
|
||||
data.image, data.x, data.y, data.w, data.h, this.next
|
||||
]);
|
||||
}
|
||||
break;
|
||||
case "drawIcon": // 绘制图标
|
||||
this.next = MotaActionBlocks['drawIcon_s'].xmlText([
|
||||
data.id, data.x, data.y, data.width, data.height, this.next
|
||||
]);
|
||||
break;
|
||||
case "drawBackground": // 绘制背景
|
||||
if (!/^\w+\.png$/.test(data.background))
|
||||
data.background=this.Colour(data.background);
|
||||
this.next = MotaActionBlocks['drawBackground_s'].xmlText([
|
||||
data.background, 'rgba('+data.background+')', data.x, data.y, data.width, data.height, this.next
|
||||
]);
|
||||
break;
|
||||
case "drawSelector": // 绘制光标
|
||||
if (data.image) {
|
||||
this.next = MotaActionBlocks['drawSelector_s'].xmlText([
|
||||
data.image, data.x, data.y, data.width, data.height, this.next
|
||||
]);
|
||||
}
|
||||
else {
|
||||
this.next = MotaActionBlocks['drawSelector_1_s'].xmlText([this.next]);
|
||||
}
|
||||
case "animateImage": // 兼容 animateImage
|
||||
break;
|
||||
default:
|
||||
|
||||
@ -314,7 +314,11 @@ Blockly.FieldColour.prototype.createWidget_ = function() {
|
||||
|
||||
var getValue=function(){
|
||||
// return self.getValue() // css颜色
|
||||
return pb.getFieldValue(targetf);
|
||||
var f = pb.getFieldValue(targetf);
|
||||
if (/^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(,0(\.\d+)?|,1)?$/.test(f)) {
|
||||
return f;
|
||||
}
|
||||
return "";
|
||||
// 也可以用 pb.getFieldValue(targetf) 获得颜色块左边的域的内容
|
||||
}
|
||||
|
||||
|
||||
@ -175,6 +175,20 @@ editor_blockly = function () {
|
||||
MotaActionBlocks['clearMap_1_s'].xmlText(),
|
||||
MotaActionBlocks['setAttribute_s'].xmlText(),
|
||||
MotaActionBlocks['fillText_s'].xmlText(),
|
||||
MotaActionBlocks['fillBoldText_s'].xmlText(),
|
||||
MotaActionBlocks['drawTextContent_s'].xmlText(),
|
||||
MotaActionBlocks['fillRect_s'].xmlText(),
|
||||
MotaActionBlocks['strokeRect_s'].xmlText(),
|
||||
MotaActionBlocks['drawLine_s'].xmlText(),
|
||||
MotaActionBlocks['drawArrow_s'].xmlText(),
|
||||
MotaActionBlocks['fillPolygon_s'].xmlText(),
|
||||
MotaActionBlocks['strokePolygon_s'].xmlText(),
|
||||
MotaActionBlocks['drawImage_s'].xmlText(),
|
||||
MotaActionBlocks['drawImage_1_s'].xmlText(),
|
||||
MotaActionBlocks['drawIcon_s'].xmlText(),
|
||||
MotaActionBlocks['drawBackground_s'].xmlText(),
|
||||
MotaActionBlocks['drawSelector_s'].xmlText(),
|
||||
MotaActionBlocks['drawSelector_1_s'].xmlText(),
|
||||
],
|
||||
'原生脚本':[
|
||||
MotaActionBlocks['function_s'].xmlText(),
|
||||
|
||||
@ -1645,11 +1645,21 @@ events.prototype._action_fillRect = function (data, x, y, prefix) {
|
||||
core.doAction();
|
||||
}
|
||||
|
||||
events.prototype._action_fillPolygon = function (data, x, y, prefix) {
|
||||
core.ui._uievent_fillPolygon(data);
|
||||
core.doAction();
|
||||
}
|
||||
|
||||
events.prototype._action_strokeRect = function (data, x, y, prefix) {
|
||||
core.ui._uievent_strokeRect(data);
|
||||
core.doAction();
|
||||
}
|
||||
|
||||
events.prototype._action_strokePolygon = function (data, x, y, prefix) {
|
||||
core.ui._uievent_strokePolygon(data);
|
||||
core.doAction();
|
||||
}
|
||||
|
||||
events.prototype._action_drawLine = function (data, x, y, prefix) {
|
||||
core.ui._uievent_drawLine(data);
|
||||
core.doAction();
|
||||
|
||||
61
libs/ui.js
61
libs/ui.js
@ -106,6 +106,7 @@ ui.prototype.fillBoldText = function (name, text, x, y, style, font) {
|
||||
if (!ctx) return;
|
||||
if (font) ctx.font = font;
|
||||
if (!style) style = ctx.fillStyle;
|
||||
if (style instanceof Array) style = core.arrayToRGBA(style);
|
||||
ctx.fillStyle = '#000000';
|
||||
ctx.fillText(text, x-1, y-1);
|
||||
ctx.fillText(text, x-1, y+1);
|
||||
@ -132,6 +133,27 @@ ui.prototype._uievent_fillRect = function (data) {
|
||||
this.fillRect('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height), data.style);
|
||||
}
|
||||
|
||||
////// 在某个canvas上绘制一个多边形 //////
|
||||
ui.prototype.fillPolygon = function (name, nodes, style) {
|
||||
if (style) core.setFillStyle(name, style);
|
||||
var ctx = this.getContextByName(name);
|
||||
if (!ctx) return;
|
||||
if (!nodes || nodes.length<3) return;
|
||||
ctx.beginPath();
|
||||
for (var i = 0; i < nodes.length; ++i) {
|
||||
var x = core.calValue(nodes[i][0]), y = core.calValue(nodes[i][1]);
|
||||
if (i == 0) ctx.moveTo(x, y);
|
||||
else ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
ui.prototype._uievent_fillPolygon = function (data) {
|
||||
this._createUIEvent();
|
||||
this.fillPolygon('uievent', data.nodes, data.style);
|
||||
}
|
||||
|
||||
////// 在某个canvas上绘制一个矩形的边框 //////
|
||||
ui.prototype.strokeRect = function (name, x, y, width, height, style, lineWidth) {
|
||||
if (style) core.setStrokeStyle(name, style);
|
||||
@ -145,6 +167,28 @@ ui.prototype._uievent_strokeRect = function (data) {
|
||||
this.strokeRect('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height), data.style, data.lineWidth);
|
||||
}
|
||||
|
||||
////// 在某个canvas上绘制一个多边形的边框 //////
|
||||
ui.prototype.strokePolygon = function (name, nodes, style, lineWidth) {
|
||||
if (style) core.setStrokeStyle(name, style);
|
||||
if (lineWidth) core.setLineWidth(name, lineWidth);
|
||||
var ctx = this.getContextByName(name);
|
||||
if (!ctx) return;
|
||||
if (!nodes || nodes.length<3) return;
|
||||
ctx.beginPath();
|
||||
for (var i = 0; i < nodes.length; ++i) {
|
||||
var x = core.calValue(nodes[i][0]), y = core.calValue(nodes[i][1]);
|
||||
if (i == 0) ctx.moveTo(x, y);
|
||||
else ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
ui.prototype._uievent_strokePolygon = function (data) {
|
||||
this._createUIEvent();
|
||||
this.strokePolygon('uievent', data.nodes, data.style, data.lineWidth);
|
||||
}
|
||||
|
||||
////// 在某个canvas上绘制一条线 //////
|
||||
ui.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) {
|
||||
if (style) core.setStrokeStyle(name, style);
|
||||
@ -326,7 +370,7 @@ ui.prototype.drawImage = function (name, image, x, y, w, h, x1, y1, w1, h1) {
|
||||
|
||||
ui.prototype._uievent_drawImage = function (data) {
|
||||
this._createUIEvent();
|
||||
this.drawImage(data.name, core.calValue(data.x), core.calValue(data.y), core.calValue(data.w), core.calValue(data.h),
|
||||
this.drawImage('uievent', data.image, core.calValue(data.x), core.calValue(data.y), core.calValue(data.w), core.calValue(data.h),
|
||||
core.calValue(data.x1), core.calValue(data.y1), core.calValue(data.w1), core.calValue(data.h1));
|
||||
}
|
||||
|
||||
@ -555,13 +599,13 @@ ui.prototype.drawWindowSelector = function(background, x, y, w, h) {
|
||||
}
|
||||
|
||||
ui.prototype._uievent_drawSelector = function (data) {
|
||||
if (data.x == null || data.y == null || data.width == null || data.height == null) {
|
||||
if (data.image == null) {
|
||||
if (main.mode != 'editor')
|
||||
core.deleteCanvas('_uievent_selector');
|
||||
return;
|
||||
}
|
||||
|
||||
var background = data.background || core.status.textAttribute.background;
|
||||
var background = data.image || core.status.textAttribute.background;
|
||||
if (typeof background != 'string') return;
|
||||
var x = core.calValue(data.x), y = core.calValue(data.y), w = core.calValue(data.width), h = core.calValue(data.height);
|
||||
w = Math.round(w); h = Math.round(h);
|
||||
@ -775,7 +819,8 @@ ui.prototype.drawTextContent = function (ctx, content, config) {
|
||||
config.left = config.left || 0;
|
||||
config.right = config.left + (config.maxWidth == null ? ctx.canvas.width : config.maxWidth);
|
||||
config.top = config.top || 0;
|
||||
config.color = config.color || core.arrayToRGBA(textAttribute.text);
|
||||
config.color = config.color || textAttribute.text;
|
||||
if (config.color instanceof Array) config.color = core.arrayToRGBA(config.color);
|
||||
if (config.bold == null) config.bold = textAttribute.bold;
|
||||
config.align = config.align || textAttribute.align || "left";
|
||||
config.fontSize = config.fontSize || textAttribute.textfont;
|
||||
@ -796,16 +841,16 @@ ui.prototype.drawTextContent = function (ctx, content, config) {
|
||||
var _textBaseLine = tempCtx.textBaseline;
|
||||
tempCtx.textBaseline = 'top';
|
||||
tempCtx.font = this._buildFont(config.fontSize, config.bold);
|
||||
var color = config.color;
|
||||
if (color instanceof Array) color = core.arrayToRGBA(color);
|
||||
tempCtx.fillStyle = color;
|
||||
tempCtx.fillStyle = config.color;
|
||||
this._drawTextContent_draw(ctx, tempCtx, content, config);
|
||||
tempCtx.textBaseline = _textBaseLine;
|
||||
}
|
||||
|
||||
ui.prototype._uievent_drawTextContent = function (data) {
|
||||
this._createUIEvent();
|
||||
this.drawTextContent('uievent', core.replaceText(data.content), data);
|
||||
data.left = core.calValue(data.left);
|
||||
data.top = core.calValue(data.top);
|
||||
this.drawTextContent('uievent', core.replaceText(data.text), data);
|
||||
}
|
||||
|
||||
// 绘制的基本逻辑：
|
||||
|
||||
@ -938,8 +938,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
|
||||
'values': values,
|
||||
'shops': {},
|
||||
'version': core.firstData.version,
|
||||
"time": new Date().getTime(),
|
||||
"hashCode": hashCode
|
||||
"time": new Date().getTime()
|
||||
};
|
||||
if (core.flags.checkConsole) {
|
||||
data.hashCode = core.utils.hashCode(data.hero);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user