From 348aaeb85751a423ed404345e29b0894efd06f11 Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Sun, 17 May 2020 11:52:09 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=9F=E7=94=9F=E6=94=AF=E6=8C=81=E5=9C=86?= =?UTF-8?q?=E8=A7=92=E8=BE=B9=E6=A1=86API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _server/MotaAction.g4 | 18 +++++---- libs/ui.js | 87 ++++++++++++++++++++++++++++++++----------- v2.x-final更新.txt | 2 +- 3 files changed, 77 insertions(+), 30 deletions(-) diff --git a/_server/MotaAction.g4 b/_server/MotaAction.g4 index 95e2450e..604ec50a 100644 --- a/_server/MotaAction.g4 +++ b/_server/MotaAction.g4 @@ -2242,29 +2242,31 @@ return code; */; fillRect_s - : '绘制矩形' '起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString '颜色' ColorString? Colour Newline + : '绘制矩形' '起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString '圆角半径' PosString? '颜色' ColorString? 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] +default : ["0","0","flag:x","300","","",null] ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : ''; -var code = '{"type": "fillRect", "x": '+PosString_0+', "y": '+PosString_1+', "width": '+PosString_2+', "height": '+PosString_3+ColorString_0+'},\n'; +PosString_4 = PosString_4 ? (', "radius": '+PosString_4) : ''; +var code = '{"type": "fillRect", "x": '+PosString_0+', "y": '+PosString_1+', "width": '+PosString_2+', "height": '+PosString_3+PosString_4+ColorString_0+'},\n'; return code; */; strokeRect_s - : '绘制矩形边框' '起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString '颜色' ColorString? Colour '线宽' IntString? Newline + : '绘制矩形边框' '起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString '圆角半径' PosString? '颜色' ColorString? Colour '线宽' IntString? 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,""] +default : ["0","0","flag:x","300","","",null,""] ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : ''; IntString_0 = IntString_0 ? (', "lineWidth": '+IntString_0) : ''; -var code = '{"type": "strokeRect", "x": '+PosString_0+', "y": '+PosString_1+', "width": '+PosString_2+', "height": '+PosString_3+ColorString_0+IntString_0+'},\n'; +PosString_4 = PosString_4 ? (', "radius": '+PosString_4) : ''; +var code = '{"type": "strokeRect", "x": '+PosString_0+', "y": '+PosString_1+', "width": '+PosString_2+', "height": '+PosString_3+PosString_4+ColorString_0+IntString_0+'},\n'; return code; */; @@ -3643,13 +3645,13 @@ ActionParser.prototype.parseAction = function() { 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 + data.x, data.y, data.width, data.height, data.radius, 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 + data.x, data.y, data.width, data.height, data.radius, data.style, 'rgba('+data.style+')', data.lineWidth, this.next ]); break; case "drawLine": // 绘制线段 diff --git a/libs/ui.js b/libs/ui.js index 94a0a1e1..b0771b30 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -134,7 +134,65 @@ ui.prototype.fillRect = function (name, x, y, width, height, style) { ui.prototype._uievent_fillRect = function (data) { this._createUIEvent(); - this.fillRect('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height), data.style); + if (data.radius) { + this.fillRoundRect('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height), core.calValue(data.radius), data.style); + } else { + this.fillRect('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height), data.style); + } +} + +////// 在某个canvas上绘制一个矩形的边框 ////// +ui.prototype.strokeRect = function (name, x, y, width, height, style, lineWidth) { + if (style) core.setStrokeStyle(name, style); + if (lineWidth) core.setLineWidth(name, lineWidth); + var ctx = this.getContextByName(name); + if (ctx) ctx.strokeRect(x, y, width, height); +} + +ui.prototype._uievent_strokeRect = function (data) { + this._createUIEvent(); + if (data.radius) { + this.strokeRoundRect('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height), + core.calValue(data.radius), data.style, data.lineWidth); + } else { + 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.fillRoundRect = function (name, x, y, width, height, radius, style) { + if (style) core.setFillStyle(name, style); + var ctx = this.getContextByName(name); + if (ctx) { + this._roundRect_buildPath(ctx, x, y, width, height, radius); + ctx.fill(); + } +} + +////// 在某个canvas上绘制一个圆角矩形的边框 ////// +ui.prototype.strokeRoundRect = function (name, x, y, width, height, radius, style, lineWidth) { + if (style) core.setStrokeStyle(name, style); + if (lineWidth) core.setLineWidth(name, lineWidth); + var ctx = this.getContextByName(name); + if (ctx) { + this._roundRect_buildPath(ctx, x, y, width, height, radius); + ctx.stroke(); + } +} + + +ui.prototype._roundRect_buildPath = function (ctx, x, y, width, height, radius) { + ctx.beginPath(); + ctx.moveTo(x + radius, y); + ctx.lineTo(x + width - radius, y); + ctx.quadraticCurveTo(x + width, y, x + width, y + radius); + ctx.lineTo(x + width, y + height - radius); + ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); + ctx.lineTo(x + radius, y + height); + ctx.quadraticCurveTo(x, y + height, x, y + height - radius); + ctx.lineTo(x, y + radius); + ctx.quadraticCurveTo(x, y, x + radius, y); + ctx.closePath(); } ////// 在某个canvas上绘制一个多边形 ////// @@ -158,19 +216,6 @@ ui.prototype._uievent_fillPolygon = function (data) { 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); - if (lineWidth) core.setLineWidth(name, lineWidth); - var ctx = this.getContextByName(name); - if (ctx) ctx.strokeRect(x, y, width, height); -} - -ui.prototype._uievent_strokeRect = function (data) { - this._createUIEvent(); - 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); @@ -1496,8 +1541,8 @@ ui.prototype._drawChoices_drawChoices = function (choices, isWindowSkin, hPos, v this.drawWindowSelector(core.status.textAttribute.background, this.HPIXEL - len/2 - 5, vPos.choice_top + 32 * core.status.event.selection - 20, len + 10, 28); else - core.strokeRect('ui', this.HPIXEL - len/2 - 5, vPos.choice_top + 32 * core.status.event.selection - 20, - len+10, 28, "#FFD700", 2); + core.strokeRoundRect('ui', this.HPIXEL - len/2 - 5, vPos.choice_top + 32 * core.status.event.selection - 20, + len+10, 28, 6, "#FFD700", 2); } } @@ -1536,7 +1581,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) { if (isWindowSkin) this.drawWindowSelector(core.status.textAttribute.background, strokeLeft, rect.bottom-35-20, len+10, 28); else - core.strokeRect('ui', strokeLeft, rect.bottom-35-20, len+10, 28, "#FFD700", 2); + core.strokeRoundRect('ui', strokeLeft, rect.bottom-35-20, len+10, 28, 6, "#FFD700", 2); } } @@ -1750,7 +1795,7 @@ ui.prototype._drawBook_drawOne = function (floorId, index, enemy, pageinfo, sele this._drawBook_drawName(index, enemy, top, left, name_width); this._drawBook_drawContent(index, enemy, top, left + name_width); if (selected) - core.strokeRect('ui', 10, top + 1, this.PIXEL - 10 * 2, pageinfo.per_height, '#FFD700'); + core.strokeRoundRect('ui', 10, top + 1, this.PIXEL - 10 * 2, pageinfo.per_height, 10, '#FFD700'); } ui.prototype._drawBook_drawBox = function (index, enemy, top, pageinfo) { @@ -2273,7 +2318,7 @@ ui.prototype._drawToolbox_drawContent = function (info, line, items, page, drawC if (drawCount) core.fillText('ui', core.itemCount(item), 64 * (i % this.HSIZE) + 56, yoffset + 33, '#FFFFFF', this._buildFont(14, true)); if (info.selectId == item) - core.strokeRect('ui', 64 * (i % this.HSIZE) + 17, yoffset - 4, 40, 40, '#FFD700'); + core.strokeRoundRect('ui', 64 * (i % this.HSIZE) + 17, yoffset - 4, 40, 40, 6, '#FFD700'); } } @@ -2448,7 +2493,7 @@ ui.prototype._drawEquipbox_drawEquiped = function (info, line) { core.drawImage('ui', core.material.images.items, 0, 32 * icon, 32, 32, offset_image, y, 32, 32); } core.fillText('ui', info.allEquips[i] || "未知", offset_text, y + 27, '#FFFFFF', this._buildFont(16, true)) - core.strokeRect('ui', offset_image - 4, y - 4, 40, 40, info.index==i?'#FFD700':"#FFFFFF"); + core.strokeRoundRect('ui', offset_image - 4, y - 4, 40, 40, 6, info.index==i?'#FFD700':"#FFFFFF"); } } @@ -2631,7 +2676,7 @@ ui.prototype.drawKeyBoard = function () { if (isWindowSkin) this.drawWindowSelector(core.status.textAttribute.background, this.HPIXEL + 92, offset - 22, 72, 27); else - core.strokeRect('ui', this.HPIXEL + 92, offset - 22, 72, 27, "#FFD700", 2); + core.strokeRoundRect('ui', this.HPIXEL + 92, offset - 22, 72, 27, 6, "#FFD700", 2); } ////// 绘制状态栏 ///// diff --git a/v2.x-final更新.txt b/v2.x-final更新.txt index df70b9ae..f795c31f 100644 --- a/v2.x-final更新.txt +++ b/v2.x-final更新.txt @@ -43,7 +43,7 @@ （已完成！） 动画/音乐/音效自动补全 （已完成！） 重构全局商店！ （已完成！） 读档时色调数据丢失 -圆角边框 +（已完成！） 圆角边框 像素高分辨率问题 （已完成！） 道具效果优化，删除部分道具相关的开关 （已完成！） 素材列表选择