diff --git a/_server/MotaAction.g4 b/_server/MotaAction.g4 index a23e90fb..a7dc1ce6 100644 --- a/_server/MotaAction.g4 +++ b/_server/MotaAction.g4 @@ -432,6 +432,8 @@ action | strokePolygon_s | fillEllipse_s | strokeEllipse_s + | fillArc_s + | strokeArc_s | drawImage_s | drawImage_1_s | drawIcon_s @@ -2368,6 +2370,35 @@ var code = '{"type": "strokeEllipse", "x": '+PosString_0+', "y": '+PosString_1+' return code; */; +fillArc_s + : '绘制扇形' '中心' 'x' PosString 'y' PosString '半径' PosString '起点角度' PosString '终点角度' PosString '颜色' ColorString? Colour Newline + +/* fillArc_s +tooltip : fillArc:绘制扇形 +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","0","90","",null,""] +ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : ''; +var code = '{"type": "fillArc", "x": '+PosString_0+', "y": '+PosString_1+', "r": '+PosString_2+', "start": '+PosString_3+', "end": '+PosString_4+ColorString_0+'},\n'; +return code; +*/; + + +strokeArc_s + : '绘制弧' '中心' 'x' PosString 'y' PosString '半径' PosString '起点角度' PosString '终点角度' PosString '颜色' ColorString? Colour '线宽' IntString? Newline + +/* strokeArc_s +tooltip : strokeArc:绘制弧 +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","0","90","",null,""] +ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : ''; +IntString_0 = IntString_0 ? (', "lineWidth": '+IntString_0) : ''; +var code = '{"type": "strokeArc", "x": '+PosString_0+', "y": '+PosString_1+', "r": '+PosString_2+', "start": '+PosString_3+', "end": '+PosString_4+ColorString_0+IntString_0+'},\n'; +return code; +*/; + + drawImage_s : '绘制图片' EvalString '起点像素' 'x' PosString 'y' PosString '宽' PosString? '高' PosString? Newline @@ -3702,6 +3733,18 @@ ActionParser.prototype.parseAction = function() { data.x, data.y, data.a, data.b, data.angle, data.style, 'rgba('+data.style+')', data.lineWidth, this.next ]); break; + case "fillArc": // 绘制弧 + data.style = this.Colour(data.style); + this.next = MotaActionBlocks['fillArc_s'].xmlText([ + data.x, data.y, data.r, data.start, data.end, data.style, 'rgba('+data.style+')', this.next + ]); + break; + case "strokeArc": // 绘制弧 + data.style = this.Colour(data.style); + this.next = MotaActionBlocks['strokeArc_s'].xmlText([ + data.x, data.y, data.r, data.start, data.end, data.style, 'rgba('+data.style+')', data.lineWidth, this.next + ]); + break; case "drawImage": // 绘制图片 if (data.x1 != null && data.y1 != null && data.w1 != null && data.h1 != null) { this.next = MotaActionBlocks['drawImage_1_s'].xmlText([ diff --git a/_server/editor_blockly.js b/_server/editor_blockly.js index f67bca45..f3d74b07 100644 --- a/_server/editor_blockly.js +++ b/_server/editor_blockly.js @@ -204,6 +204,8 @@ editor_blockly = function () { MotaActionBlocks['strokePolygon_s'].xmlText(), MotaActionBlocks['fillEllipse_s'].xmlText(), MotaActionBlocks['strokeEllipse_s'].xmlText(), + MotaActionBlocks['fillArc_s'].xmlText(), + MotaActionBlocks['strokeArc_s'].xmlText(), MotaActionBlocks['drawImage_s'].xmlText(), MotaActionBlocks['drawImage_1_s'].xmlText(), MotaActionBlocks['drawIcon_s'].xmlText(), @@ -706,7 +708,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", "fillEllipse_s", "strokeEllipse_s", + "drawArrow_s", "fillPolygon_s", "strokePolygon_s", "fillEllipse_s", "strokeEllipse_s", "fillArc_s", "strokeArc_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 d0982ade..b7601032 100644 --- a/libs/events.js +++ b/libs/events.js @@ -1123,11 +1123,13 @@ events.prototype.__precompile_getArray = function () { ]; var uievents = [ "clearMap", "fillText", "fillBoldText", "fillRect", "strokeRect", "fillEllipse", "strokeEllipse", - "drawIcon", "drawSelector", "drawBackground", + "fillArc", "strokeArc", "drawIcon", "drawSelector", "drawBackground", ]; var others = { "fillEllipse": ["a", "b"], "strokeEllipse": ["a", "b"], + "fillArc": ["r", "start", "end"], + "strokeArc": ["r", "start", "end"], "drawLine": ["x1", "y1", "x2", "y2"], "drawArrow": ["x1", "y1", "x2", "y2"], "drawImage": ["x", "y", "w", "h", "x1", "y1", "w1", "h1"], @@ -2222,6 +2224,14 @@ events.prototype._action_strokeEllipse = function (data, x, y, prefix) { this.__action_doUIEvent(data); } +events.prototype._action_fillArc = function (data, x, y, prefix) { + this.__action_doUIEvent(data); +} + +events.prototype._action_strokeArc = function (data, x, y, prefix) { + this.__action_doUIEvent(data); +} + events.prototype._action_drawLine = function (data, x, y, prefix) { this.__action_doUIEvent(data); } diff --git a/libs/ui.js b/libs/ui.js index 642a4776..204796d0 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -279,6 +279,39 @@ ui.prototype._uievent_strokeEllipse = function (data) { core.calValue(data.b), (core.calValue(data.angle) || 0) * Math.PI / 180, data.style, data.lineWidth); } +ui.prototype.fillArc = function (name, x, y, r, start, end, style) { + if (style) core.setFillStyle(name, style); + var ctx = this.getContextByName(name); + if (!ctx) return; + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.arc(x, y, r, start, end); + ctx.closePath(); + ctx.fill(); +} + +ui.prototype._uievent_fillArc = function (data) { + this._createUIEvent(); + this.fillArc('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.r), + (core.calValue(data.start) || 0) * Math.PI / 180, (core.calValue(data.end) || 0) * Math.PI / 180, data.style); +} + +ui.prototype.strokeArc = function (name, x, y, r, start, end, 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, start, end); + ctx.stroke(); +} + +ui.prototype._uievent_strokeArc = function (data) { + this._createUIEvent(); + this.strokeArc('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.r), + (core.calValue(data.start) || 0) * Math.PI / 180, (core.calValue(data.end) || 0) * Math.PI / 180, data.style, data.lineWidth); +} + ////// 在某个canvas上绘制一条线 ////// ui.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) { if (style) core.setStrokeStyle(name, style); diff --git a/v2.x-final更新.txt b/v2.x-final更新.txt index f795c31f..7cbd5c2f 100644 --- a/v2.x-final更新.txt +++ b/v2.x-final更新.txt @@ -134,7 +134,7 @@ 70. “显隐勇士”事件指令希望加个淡入淡出时间参数 (不处理,请用等待事件) 1. 希望给core.drawTip()和core.playSound()出个同步版本,目前只有异步版本,后者如果要模拟同步就得绑在一个透明动画上 (已完成!) 72. “绘制描边文本”事件希望加一个“描边颜色”参数,目前只能描黑边 -73. 画弧既然有现成的API,那建议也作为UI绘制事件提供。甚至希望提供画椭圆功能(长短轴水平或铅直的那种)参数为中心坐标和长短轴长度 +(已完成!) 73. 画弧既然有现成的API,那建议也作为UI绘制事件提供。甚至希望提供画椭圆功能(长短轴水平或铅直的那种)参数为中心坐标和长短轴长度 (已完成!) 74. “设置画布属性”的基准线建议增加'hanging'和'ideographic'这两种模式 (已完成!) 75. 建议修复“绘制多行文本”时行距比字号大不太多会导致各行下缘丢失的bug(加大行距又会导致第一行的纵坐标难以估计),此bug在道具商店和1.3倍行距英文看的很明显 (已完成!) 76. (来自群友)建议给第一代全局商店像“显示选择项”一样提供图标、颜色和出现条件