From d1a1f223f160de9244a5690047d47fb1967cbc9c Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Sun, 17 May 2020 12:22:03 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=98=E5=88=B6=E6=A4=AD=E5=9C=86API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _server/MotaAction.g4 | 46 ++++++++++++++++++++------------------- _server/editor_blockly.js | 6 ++--- libs/events.js | 9 ++++---- libs/ui.js | 28 ++++++++++++++++-------- 4 files changed, 51 insertions(+), 38 deletions(-) diff --git a/_server/MotaAction.g4 b/_server/MotaAction.g4 index 604ec50a..a23e90fb 100644 --- a/_server/MotaAction.g4 +++ b/_server/MotaAction.g4 @@ -430,8 +430,8 @@ action | drawArrow_s | fillPolygon_s | strokePolygon_s - | fillCircle_s - | strokeCircle_s + | fillEllipse_s + | strokeEllipse_s | drawImage_s | drawImage_1_s | drawIcon_s @@ -2339,30 +2339,32 @@ var code = '{"type": "strokePolygon", "nodes": ['+EvalString_0+']'+ColorString_0 return code; */; -fillCircle_s - : '绘制圆' '圆心' 'x' PosString 'y' PosString '半径' PosString '颜色' ColorString? Colour Newline +fillEllipse_s + : '绘制椭圆' '中心' 'x' PosString 'y' PosString '长半径' PosString '短半径' PosString '顺时针旋转度数' PosString? '颜色' ColorString? Colour Newline -/* fillCircle_s -tooltip : fillCircle：绘制圆 -helpUrl : https://h5mota.com/games/template/_docs/#/event?id=fillCircle%ef%bc%9a%e7%bb%98%e5%88%b6%e5%9c%86 +/* fillEllipse_s +tooltip : fillEllipse：绘制椭圆 +helpUrl : https://h5mota.com/games/template/_docs/#/event?id=fillEllipse%ef%bc%9a%e7%bb%98%e5%88%b6%e5%9c%86 colour : this.subColor -default : ["0","0","100","",null] +default : ["0","0","100","100","0","",null] ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : ''; -var code = '{"type": "fillCircle", "x": '+PosString_0+', "y": '+PosString_1+', "r": '+PosString_2+ColorString_0+'},\n'; +PosString_4 = PosString_4 ? (', "angle": ' + PosString_4) : ''; +var code = '{"type": "fillEllipse", "x": '+PosString_0+', "y": '+PosString_1+', "a": '+PosString_2+', "b": '+PosString_3+PosString_4+ColorString_0+'},\n'; return code; */; -strokeCircle_s - : '绘制圆边框' '圆心' 'x' PosString 'y' PosString '半径' PosString '颜色' ColorString? Colour '线宽' IntString? Newline +strokeEllipse_s + : '绘制椭圆边框' '中心' 'x' PosString 'y' PosString '长半径' PosString '短半径' PosString '顺时针旋转度数' PosString? '颜色' ColorString? Colour '线宽' IntString? Newline -/* strokeCircle_s -tooltip : strokeCircle：绘制圆边框 -helpUrl : https://h5mota.com/games/template/_docs/#/event?id=strokeCircle%ef%bc%9a%e7%bb%98%e5%88%b6%e5%9c%86%e8%be%b9%e6%a1%86 +/* strokeEllipse_s +tooltip : strokeEllipse：绘制椭圆边框 +helpUrl : https://h5mota.com/games/template/_docs/#/event?id=strokeEllipse%ef%bc%9a%e7%bb%98%e5%88%b6%e5%9c%86%e8%be%b9%e6%a1%86 colour : this.subColor -default : ["0","0","100","",null,""] +default : ["0","0","100","100","0","",null,""] ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : ''; IntString_0 = IntString_0 ? (', "lineWidth": '+IntString_0) : ''; -var code = '{"type": "strokeCircle", "x": '+PosString_0+', "y": '+PosString_1+', "r": '+PosString_2+ColorString_0+IntString_0+'},\n'; +PosString_4 = PosString_4 ? (', "angle": ' + PosString_4) : ''; +var code = '{"type": "strokeEllipse", "x": '+PosString_0+', "y": '+PosString_1+', "a": '+PosString_2+', "b": '+PosString_3+PosString_4+ColorString_0+IntString_0+'},\n'; return code; */; @@ -3688,16 +3690,16 @@ ActionParser.prototype.parseAction = function() { x_str.join(','), y_str.join(','), data.style, 'rgba('+data.style+')', data.lineWidth, this.next ]); break; - case "fillCircle": // 绘制圆 + case "fillEllipse": // 绘制椭圆 data.style = this.Colour(data.style); - this.next = MotaActionBlocks['fillCircle_s'].xmlText([ - data.x, data.y, data.r, data.style, 'rgba('+data.style+')', this.next + this.next = MotaActionBlocks['fillEllipse_s'].xmlText([ + data.x, data.y, data.a, data.b, data.angle, data.style, 'rgba('+data.style+')', this.next ]); break; - case "strokeCircle": // 绘制圆边框 + case "strokeEllipse": // 绘制椭圆边框 data.style = this.Colour(data.style); - this.next = MotaActionBlocks['strokeCircle_s'].xmlText([ - data.x, data.y, data.r, data.style, 'rgba('+data.style+')', data.lineWidth, this.next + this.next = MotaActionBlocks['strokeEllipse_s'].xmlText([ + data.x, data.y, data.a, data.b, data.angle, data.style, 'rgba('+data.style+')', data.lineWidth, this.next ]); break; case "drawImage": // 绘制图片 diff --git a/_server/editor_blockly.js b/_server/editor_blockly.js index 8b23bce8..f67bca45 100644 --- a/_server/editor_blockly.js +++ b/_server/editor_blockly.js @@ -202,8 +202,8 @@ editor_blockly = function () { MotaActionBlocks['drawArrow_s'].xmlText(), MotaActionBlocks['fillPolygon_s'].xmlText(), MotaActionBlocks['strokePolygon_s'].xmlText(), - MotaActionBlocks['fillCircle_s'].xmlText(), - MotaActionBlocks['strokeCircle_s'].xmlText(), + MotaActionBlocks['fillEllipse_s'].xmlText(), + MotaActionBlocks['strokeEllipse_s'].xmlText(), MotaActionBlocks['drawImage_s'].xmlText(), MotaActionBlocks['drawImage_1_s'].xmlText(), MotaActionBlocks['drawIcon_s'].xmlText(), @@ -706,7 +706,7 @@ function omitedcheckUpdateFunction(event) { var types = [ "previewUI_s", "clearMap_s", "clearMap_1_s", "setAttribute_s", "fillText_s", "fillBoldText_s", "fillRect_s", "strokeRect_s", "drawLine_s", - "drawArrow_s", "fillPolygon_s", "strokePolygon_s", "fillCircle_s", "strokeCircle_s", + "drawArrow_s", "fillPolygon_s", "strokePolygon_s", "fillEllipse_s", "strokeEllipse_s", "drawImage_s", "drawImage_1_s", "drawIcon_s", "drawBackground_s", "drawSelector_s", "drawSelector_1_s", "waitContext_2" ]; diff --git a/libs/events.js b/libs/events.js index 2a613771..d0982ade 100644 --- a/libs/events.js +++ b/libs/events.js @@ -1122,11 +1122,12 @@ events.prototype.__precompile_getArray = function () { "setValue", "setEnemy", "setFloor", "setGlobalValue", ]; var uievents = [ - "clearMap", "fillText", "fillBoldText", "fillRect", "strokeRect", "strokeCircle", + "clearMap", "fillText", "fillBoldText", "fillRect", "strokeRect", "fillEllipse", "strokeEllipse", "drawIcon", "drawSelector", "drawBackground", ]; var others = { - "strokeCircle": ["r"], + "fillEllipse": ["a", "b"], + "strokeEllipse": ["a", "b"], "drawLine": ["x1", "y1", "x2", "y2"], "drawArrow": ["x1", "y1", "x2", "y2"], "drawImage": ["x", "y", "w", "h", "x1", "y1", "w1", "h1"], @@ -2213,11 +2214,11 @@ events.prototype._precompile_strokePolygon = function (data) { return data; } -events.prototype._action_fillCircle = function (data, x, y, prefix) { +events.prototype._action_fillEllipse = function (data, x, y, prefix) { this.__action_doUIEvent(data); } -events.prototype._action_strokeCircle = function (data, x, y, prefix) { +events.prototype._action_strokeEllipse = function (data, x, y, prefix) { this.__action_doUIEvent(data); } diff --git a/libs/ui.js b/libs/ui.js index b0771b30..642a4776 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -238,35 +238,45 @@ ui.prototype._uievent_strokePolygon = function (data) { this.strokePolygon('uievent', data.nodes, data.style, data.lineWidth); } -////// 在某个canvas上绘制一个圆 ////// -ui.prototype.fillCircle = function (name, x, y, r, style) { +////// 在某个canvas上绘制一个椭圆 ////// +ui.prototype.fillEllipse = function (name, x, y, a, b, angle, style) { if (style) core.setFillStyle(name, style); var ctx = this.getContextByName(name); if (!ctx) return; ctx.beginPath(); - ctx.arc(x, y, r, 0, 2*Math.PI); + ctx.ellipse(x, y, a, b, angle, 0, 2*Math.PI); ctx.fill(); } -ui.prototype._uievent_fillCircle = function (data) { +ui.prototype.fillCircle = function (name, x, y, r, style) { + return this.fillEllipse(name, x, y, r, r, 0, style); +} + +ui.prototype._uievent_fillEllipse = function (data) { this._createUIEvent(); - this.fillCircle('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.r), data.style); + this.fillEllipse('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.a), + core.calValue(data.b), (core.calValue(data.angle) || 0) * Math.PI / 180, data.style); } ////// 在某个canvas上绘制一个圆的边框 ////// -ui.prototype.strokeCircle = function (name, x, y, r, style, lineWidth) { +ui.prototype.strokeEllipse = function (name, x, y, a, b, angle, style, lineWidth) { if (style) core.setStrokeStyle(name, style); if (lineWidth) core.setLineWidth(name, lineWidth); var ctx = this.getContextByName(name); if (!ctx) return; ctx.beginPath(); - ctx.arc(x, y, r, 0, 2*Math.PI); + ctx.ellipse(x, y, a, b, angle, 0, 2*Math.PI); ctx.stroke(); } -ui.prototype._uievent_strokeCircle = function (data) { +ui.prototype.strokeCircle = function (name, x, y, r, style, lineWidth) { + return this.strokeEllipse(name, x, y, r, r, 0, style, lineWidth); +} + +ui.prototype._uievent_strokeEllipse = function (data) { this._createUIEvent(); - this.strokeCircle('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.r), data.style, data.lineWidth); + this.strokeEllipse('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.a), + core.calValue(data.b), (core.calValue(data.angle) || 0) * Math.PI / 180, data.style, data.lineWidth); } ////// 在某个canvas上绘制一条线 //////