原生支持圆角边框API
This commit is contained in:
ckcz123
parent
0d3ed417b3
commit
348aaeb857
@ -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": // 绘制线段
|
||||
|
||||
87
libs/ui.js
87
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);
|
||||
}
|
||||
|
||||
////// 绘制状态栏 /////
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
（已完成！） 动画/音乐/音效自动补全
|
||||
（已完成！） 重构全局商店！
|
||||
（已完成！） 读档时色调数据丢失
|
||||
圆角边框
|
||||
（已完成！） 圆角边框
|
||||
像素高分辨率问题
|
||||
（已完成！） 道具效果优化，删除部分道具相关的开关
|
||||
（已完成！） 素材列表选择
|
||||
|
||||
Loading…
Reference in New Issue
Block a user