jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

原生支持圆角边框API

Browse Source
This commit is contained in:
ckcz123 2020-05-17 11:52:09 +08:00
parent 0d3ed417b3
commit 348aaeb857
3 changed files with 77 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
_server/MotaAction.g4
View File

@ -2242,29 +2242,31 @@ return code;
*/; */;
fillRect_s fillRect_s
: '绘制矩形' '起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString '颜色' ColorString? Colour Newline : '绘制矩形' '起点像素' 'x' PosString 'y' PosString '宽' PosString '高' PosString '圆角半径' PosString? '颜色' ColorString? Colour Newline
/* fillRect_s /* fillRect_s
tooltip : fillRect：绘制矩形 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 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 colour : this.subColor
default : ["0","0","flag:x","300","",null] default : ["0","0","flag:x","300","","",null]
ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : ''; 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; return code;
*/; */;
strokeRect_s 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 /* strokeRect_s
tooltip : strokeRect：绘制矩形边框 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 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 colour : this.subColor
default : ["0","0","flag:x","300","",null,""] default : ["0","0","flag:x","300","","",null,""]
ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : ''; ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : '';
IntString_0 = IntString_0 ? (', "lineWidth": '+IntString_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; return code;
*/; */;
@ -3643,13 +3645,13 @@ ActionParser.prototype.parseAction = function() {
case "fillRect": // 绘制矩形 case "fillRect": // 绘制矩形
data.style = this.Colour(data.style); data.style = this.Colour(data.style);
this.next = MotaActionBlocks['fillRect_s'].xmlText([ 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; break;
case "strokeRect": // 绘制矩形边框 case "strokeRect": // 绘制矩形边框
data.style = this.Colour(data.style); data.style = this.Colour(data.style);
this.next = MotaActionBlocks['strokeRect_s'].xmlText([ 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; break;
case "drawLine": // 绘制线段 case "drawLine": // 绘制线段

85
libs/ui.js
View File

@ -134,7 +134,65 @@ ui.prototype.fillRect = function (name, x, y, width, height, style) {
ui.prototype._uievent_fillRect = function (data) { ui.prototype._uievent_fillRect = function (data) {
this._createUIEvent(); this._createUIEvent();
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); 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上绘制一个多边形 ////// ////// 在某个canvas上绘制一个多边形 //////
@ -158,19 +216,6 @@ ui.prototype._uievent_fillPolygon = function (data) {
this.fillPolygon('uievent', data.nodes, data.style); 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上绘制一个多边形的边框 ////// ////// 在某个canvas上绘制一个多边形的边框 //////
ui.prototype.strokePolygon = function (name, nodes, style, lineWidth) { ui.prototype.strokePolygon = function (name, nodes, style, lineWidth) {
if (style) core.setStrokeStyle(name, style); 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.drawWindowSelector(core.status.textAttribute.background,
this.HPIXEL - len/2 - 5, vPos.choice_top + 32 * core.status.event.selection - 20, len + 10, 28); this.HPIXEL - len/2 - 5, vPos.choice_top + 32 * core.status.event.selection - 20, len + 10, 28);
else else
core.strokeRect('ui', this.HPIXEL - len/2 - 5, vPos.choice_top + 32 * core.status.event.selection - 20, core.strokeRoundRect('ui', this.HPIXEL - len/2 - 5, vPos.choice_top + 32 * core.status.event.selection - 20,
len+10, 28, "#FFD700", 2); len+10, 28, 6, "#FFD700", 2);
} }
} }
@ -1536,7 +1581,7 @@ ui.prototype.drawConfirmBox = function (text, yesCallback, noCallback) {
if (isWindowSkin) if (isWindowSkin)
this.drawWindowSelector(core.status.textAttribute.background, strokeLeft, rect.bottom-35-20, len+10, 28); this.drawWindowSelector(core.status.textAttribute.background, strokeLeft, rect.bottom-35-20, len+10, 28);
else 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_drawName(index, enemy, top, left, name_width);
this._drawBook_drawContent(index, enemy, top, left + name_width); this._drawBook_drawContent(index, enemy, top, left + name_width);
if (selected) 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) { 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) if (drawCount)
core.fillText('ui', core.itemCount(item), 64 * (i % this.HSIZE) + 56, yoffset + 33, '#FFFFFF', this._buildFont(14, true)); core.fillText('ui', core.itemCount(item), 64 * (i % this.HSIZE) + 56, yoffset + 33, '#FFFFFF', this._buildFont(14, true));
if (info.selectId == item) 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.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.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) if (isWindowSkin)
this.drawWindowSelector(core.status.textAttribute.background, this.HPIXEL + 92, offset - 22, 72, 27); this.drawWindowSelector(core.status.textAttribute.background, this.HPIXEL + 92, offset - 22, 72, 27);
else 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);
} }
////// 绘制状态栏 ///// ////// 绘制状态栏 /////

2
v2.x-final更新.txt
View File

@ -43,7 +43,7 @@
（已完成！） 动画/音乐/音效自动补全 （已完成！） 动画/音乐/音效自动补全
（已完成！） 重构全局商店！ （已完成！） 重构全局商店！
（已完成！） 读档时色调数据丢失 （已完成！） 读档时色调数据丢失
圆角边框 （已完成！） 圆角边框
像素高分辨率问题 像素高分辨率问题
（已完成！） 道具效果优化，删除部分道具相关的开关 （已完成！） 道具效果优化，删除部分道具相关的开关
（已完成！） 素材列表选择 （已完成！） 素材列表选择