From 2586ec9b76ff5ce162e21f233d66fef7b5b8d090 Mon Sep 17 00:00:00 2001 From: oc Date: Sun, 26 May 2019 23:02:46 +0800 Subject: [PATCH] uievents --- _docs/api.md | 2 +- _docs/event.md | 193 +++++++++++++++++ _server/MotaAction.g4 | 385 +++++++++++++++++++++++++++++++++ _server/colorPicker/jsColor.js | 6 +- _server/editor_blockly.js | 14 ++ libs/events.js | 10 + libs/ui.js | 61 +++++- project/functions.js | 3 +- 8 files changed, 662 insertions(+), 12 deletions(-) diff --git a/_docs/api.md b/_docs/api.md index 0aa05bfe..640f74fc 100644 --- a/_docs/api.md +++ b/_docs/api.md @@ -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定时器。 diff --git a/_docs/event.md b/_docs/event.md index dfd2245c..a673d714 100644 --- a/_docs/event.md +++ b/_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脚本 上述给出了这么多事件，但有时候往往不能满足需求，这时候就需要执行自定义脚本了。 diff --git a/_server/MotaAction.g4 b/_server/MotaAction.g4 index a2adf880..5f8f8425 100644 --- a/_server/MotaAction.g4 +++ b/_server/MotaAction.g4 @@ -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