From 07646a8491e03d9bca6bd0d166e9777ab3d9f96a Mon Sep 17 00:00:00 2001 From: oc Date: Fri, 31 May 2019 22:52:58 +0800 Subject: [PATCH] uievent z --- _docs/event.md | 1 + _docs/personalization.md | 3 +++ _server/MotaAction.g4 | 12 ++++++++---- libs/ui.js | 10 +++++++++- 4 files changed, 21 insertions(+), 5 deletions(-) diff --git a/_docs/event.md b/_docs/event.md index 7cd66565..64a598d1 100644 --- a/_docs/event.md +++ b/_docs/event.md @@ -1840,6 +1840,7 @@ UI绘制事件。 - `alpha`：不透明度，必须是0到1之间的浮点数 - `align`：对齐方式，只能是`left`, `center`, `right`，分别代表左对齐，居中和右对齐 - `baseline`：基准线，只能是`top`, `middle`, `alphabetic`, `bottom`，分别代表顶部，居中，标准值和底部。 +- `z`：画布的z值，必须是正整数。初始创建时画布的z值是135。请注意，闪烁光标所在画布的z值永远比该画布大1。 ### fillText：绘制文本 diff --git a/_docs/personalization.md b/_docs/personalization.md index 72de08cd..5b71c8c3 100644 --- a/_docs/personalization.md +++ b/_docs/personalization.md @@ -22,6 +22,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们 - paint**[D]**：绘图层；主要用来进行绘图模式。（z-index: 95) - curtain：色调层；用来控制当前楼层的画面色调 (z-index: 125) - image1\~50**[D]**：图片层；用来绘制图片等操作。（z-index: 100+code, 101~150） +- uievent**[D]**：自定义UI绘制层；用来进行自定义UI绘制等操作。（z-index：135，可以通过事件设置该值） - ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等 (z-index: 140) - data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。 (z-index: 170) @@ -29,6 +30,8 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们 而，色调层的z-index是25，ui层的z-index是140；因此，图片编号在1~24的将被色调层遮挡，25~40的将被ui层遮挡，41~50的将遮挡UI层。 +uievent层为自定义UI绘制所在的层，其z值初始是135，可以通过事件设置；自定义绘制的闪烁光标所在层的z值永远比该值大1。 + ### 动态创建canvas 从V2.5.3开始，可以在H5样板中任意动态创建canvas并进行使用。 diff --git a/_server/MotaAction.g4 b/_server/MotaAction.g4 index 2d0a5276..1d87eba5 100644 --- a/_server/MotaAction.g4 +++ b/_server/MotaAction.g4 @@ -1917,13 +1917,13 @@ return code; setAttribute_s - : '设置画布属性' '字体' EvalString? '填充样式' EvalString? Colour '边框样式' EvalString? Colour BGNL? '线宽度' EvalString? '不透明度' EvalString? '对齐' TextAlign_List '基准线' TextBaseline_List Newline + : '设置画布属性' '字体' EvalString? '填充样式' EvalString? Colour '边框样式' EvalString? Colour BGNL? '线宽度' EvalString? '不透明度' EvalString? '对齐' TextAlign_List '基准线' TextBaseline_List 'z值' EvalString? Newline /* setAttribute_s tooltip : setAttribute：设置画布属性 helpUrl : https://h5mota.com/games/template/_docs/#/event?id=setAttribute%ef%bc%9a%e8%ae%be%e7%bd%ae%e7%94%bb%e5%b8%83%e5%b1%9e%e6%80%a7 colour : this.subColor -default : ["","",'rgba(255,255,255,1)',"",'rgba(255,255,255,1)',"","",null,null] +default : ["","",'rgba(255,255,255,1)',"",'rgba(255,255,255,1)',"","",null,null,""] TextAlign_List_0 = TextAlign_List_0==='null'?'': ', "align": "'+TextAlign_List_0+'"'; TextBaseline_List_0 = TextBaseline_List_0==='null'?'': ', "baseline": "'+TextBaseline_List_0+'"'; var colorRe = MotaActionFunctions.pattern.colorRe; @@ -1949,7 +1949,11 @@ if (EvalString_4) { if (isNaN(f) || f<0 || f>1) throw new Error('不透明度必须是0到1的浮点数或不填'); EvalString_4 = ', "alpha": '+EvalString_4; } -var code = '{"type": "setAttribute"'+EvalString_0+EvalString_1+EvalString_2+EvalString_3+EvalString_4+TextAlign_List_0+TextBaseline_List_0+'},\n'; +if (EvalString_5) { + if (!/^\d+$/.test(EvalString_5))throw new Error('z值必须是整数或不填'); + EvalString_5 = ', "z": '+EvalString_5; +} +var code = '{"type": "setAttribute"'+EvalString_0+EvalString_1+EvalString_2+EvalString_3+EvalString_4+TextAlign_List_0+TextBaseline_List_0+EvalString_5+'},\n'; return code; */; @@ -3234,7 +3238,7 @@ ActionParser.prototype.parseAction = function() { data.strokeStyle=this.Colour(data.strokeStyle); this.next = MotaActionBlocks['setAttribute_s'].xmlText([ data.font,data.fillStyle,'rgba('+data.fillStyle+')',data.strokeStyle,'rgba('+data.strokeStyle+')', - data.lineWidth,data.alpha,data.align,data.baseline,this.next]); + data.lineWidth,data.alpha,data.align,data.baseline,data.z,this.next]); break; case "fillText": // 绘制一行文本 data.style = this.Colour(data.style); diff --git a/libs/ui.js b/libs/ui.js index c4b5ecbb..d2ef8f88 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -301,6 +301,12 @@ ui.prototype._uievent_setAttribute = function (data) { if (data.strokeStyle) this.setStrokeStyle('uievent', data.strokeStyle); if (data.align) this.setTextAlign('uievent', data.align); if (data.baseline) this.setTextBaseline('uievent', data.baseline); + if (data.z != null && main.mode != 'editor') { + var z = parseInt(data.z) || 135; + core.dymCanvas.uievent.canvas.style.zIndex = z; + if (core.dymCanvas._uievent_selector) + core.dymCanvas._uievent_selector.canvas.style.zIndex = z + 1; + } } ////// 计算某段文字的宽度 ////// @@ -613,7 +619,9 @@ ui.prototype._uievent_drawSelector = function (data) { this._drawSelector('uievent', background, w, h, x, y); return; } - var ctx = core.createCanvas('_uievent_selector', x, y, w, h, 136); + var z = 136; + if (core.dymCanvas.uievent) z = (parseInt(core.dymCanvas.uievent.canvas.style.zIndex) || 135) + 1; + var ctx = core.createCanvas('_uievent_selector', x, y, w, h, z); ctx.canvas.style.opacity = 0.8; this._drawSelector(ctx, background, w, h); }