From 6f75c878a06c2577cf18a875f3ee650c1cd2a871 Mon Sep 17 00:00:00 2001 From: oc Date: Wed, 19 Jun 2019 23:17:54 +0800 Subject: [PATCH] Fix uievent bugs & fillCircle --- _docs/event.md | 20 ++++++++++++++ _server/MotaAction.g4 | 53 ++++++++++++++++++++++++++++++++++++ _server/editor_blockly.js | 31 ++++++++++++++++----- _server/editor_unsorted_1.js | 2 ++ _server/editor_unsorted_3.js | 4 +++ libs/events.js | 10 +++++++ libs/ui.js | 38 +++++++++++++++++++++++++- 7 files changed, 150 insertions(+), 8 deletions(-) diff --git a/_docs/event.md b/_docs/event.md index 9c40d646..98fe65e9 100644 --- a/_docs/event.md +++ b/_docs/event.md @@ -2088,6 +2088,26 @@ UI绘制事件。此事件可以绘制一个多边形边框。 参数列表和`fillPolygon`基本相同，不过多了一个`lineWidth`表示的绘制线宽。 +### fillCircle：绘制圆 + +UI绘制事件。此项可以绘制一个圆。 + +```js +[ + {"type": "fillCircle", "x": 100, "y": 100, "r": 10, "style": [255,0,0,1]} +] +``` + +x, y, r必填，为要绘制的圆心和半径；也可以用`flag:xxx`。 + +color可选，表示绘制时的颜色，为三元组RGB或四元组RGBA。 + +### strokeCircle：绘制圆边框 + +UI绘制事件。此项可以绘制一个圆边框。 + +参数列表和`fillCircle`基本相同，不过多了一个`lineWidth`表示的绘制线宽。 + ### drawImage：绘制图片 UI绘制事件。此事件可以绘制一个图片。 diff --git a/_server/MotaAction.g4 b/_server/MotaAction.g4 index b6c5c19c..58007978 100644 --- a/_server/MotaAction.g4 +++ b/_server/MotaAction.g4 @@ -354,6 +354,8 @@ action | drawArrow_s | fillPolygon_s | strokePolygon_s + | fillCircle_s + | strokeCircle_s | drawImage_s | drawImage_1_s | drawIcon_s @@ -2168,6 +2170,45 @@ var code = '{"type": "strokePolygon", "nodes": ['+EvalString_0+']'+EvalString_2+ return code; */; +fillCircle_s + : '绘制圆' '圆心' 'x' PosString 'y' PosString '半径' PosString '颜色' EvalString? 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 +colour : this.subColor +default : ["0","0","100","",null] +var colorRe = MotaActionFunctions.pattern.colorRe; +if (EvalString_0) { + if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1'); + EvalString_0 = ', "style": ['+EvalString_0+']'; +} +var code = '{"type": "fillCircle", "x": '+PosString_0+', "y": '+PosString_1+', "r": '+PosString_2+EvalString_0+'},\n'; +return code; +*/; + +strokeCircle_s + : '绘制圆边框' '圆心' 'x' PosString 'y' PosString '半径' PosString '颜色' EvalString? Colour '线宽' EvalString? 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 +colour : this.subColor +default : ["0","0","100","",null,""] +var colorRe = MotaActionFunctions.pattern.colorRe; +if (EvalString_0) { + if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1'); + EvalString_0 = ', "style": ['+EvalString_0+']'; +} +if (EvalString_1) { + if (!/^\d+$/.test(EvalString_1))throw new Error('线宽必须是整数或不填'); + EvalString_1 = ', "lineWidth": '+EvalString_1; +} +var code = '{"type": "strokeCircle", "x": '+PosString_0+', "y": '+PosString_1+', "r": '+PosString_2+EvalString_0+EvalString_1+'},\n'; +return code; +*/; + + drawImage_s : '绘制图片' EvalString '起点像素' 'x' PosString 'y' PosString '宽' PosString? '高' PosString? Newline @@ -3314,6 +3355,18 @@ ActionParser.prototype.parseAction = function() { x_str.join(','), y_str.join(','), data.style, 'rgba('+data.style+')', data.lineWidth, this.next ]); break; + case "fillCircle": // 绘制圆 + 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 + ]); + break; + case "strokeCircle": // 绘制圆边框 + 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 + ]); + 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 83e56a95..f89f36bf 100644 --- a/_server/editor_blockly.js +++ b/_server/editor_blockly.js @@ -183,6 +183,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['drawImage_s'].xmlText(), MotaActionBlocks['drawImage_1_s'].xmlText(), MotaActionBlocks['drawIcon_s'].xmlText(), @@ -610,20 +612,35 @@ function omitedcheckUpdateFunction(event) { setvalue(JSON.stringify(obj)); } - editor_blockly.doubleClickBlock = function (blockId) { - var b = editor_blockly.workspace.getBlockById(blockId); - // console.log(Blockly.JavaScript.blockToCode(b)); - if (b && b.type == 'previewUI_s') { // previewUI + var previewBlock = function (b) { + var types = [ + "previewUI_s", "clearMap_s", "clearMap_1_s", "setAttribute_s", "fillText_s", + "fillBoldText_s", "drawTextContent_s", "fillRect_s", "strokeRect_s", "drawLine_s", + "drawArrow_s", "fillPolygon_s", "strokePolygon_s", "fillCircle_s", "strokeCircle_s", + "drawImage_s", "drawImage_1_s", "drawIcon_s", "drawBackground_s", "drawSelector_s", "drawSelector_1_s" + ]; + if (b && types.indexOf(b.type)>=0) { try { var code = "[" + Blockly.JavaScript.blockToCode(b).replace(/\\i/g, '\\\\i') + "]"; eval("var obj="+code); // console.log(obj); - if (obj.length > 0 && obj[0].type == 'previewUI') { - uievent.previewUI(obj[0].action); + if (obj.length > 0 && b.type.startsWith(obj[0].type)) { + if (b.type == 'previewUI_s') + uievent.previewUI(obj[0].action); + else uievent.previewUI(obj); } } catch (e) {main.log(e);} - return; + return true; } + return false; + } + + editor_blockly.doubleClickBlock = function (blockId) { + var b = editor_blockly.workspace.getBlockById(blockId); + console.log(Blockly.JavaScript.blockToCode(b)); + + if (previewBlock(b)) return; + if (b && b.type in selectPointBlocks) { // selectPoint this.selectPoint(); return; diff --git a/_server/editor_unsorted_1.js b/_server/editor_unsorted_1.js index 91f754c7..73955ab2 100644 --- a/_server/editor_unsorted_1.js +++ b/_server/editor_unsorted_1.js @@ -362,6 +362,7 @@ editor.constructor.prototype.listen=function () { reDo = JSON.parse(JSON.stringify(currDrawData)); currDrawData = {pos: [], info: {}}; editor.preMapData = null; + return; } //Ctrl+y 重做一步redo if (e.keyCode == 89 && e.ctrlKey && reDo && reDo.pos.length && selectBox.isSelected()) { @@ -372,6 +373,7 @@ editor.constructor.prototype.listen=function () { editor.updateMap(); currDrawData = JSON.parse(JSON.stringify(reDo)); reDo = null; + return; } // PGUP和PGDOWN切换楼层 diff --git a/_server/editor_unsorted_3.js b/_server/editor_unsorted_3.js index b0adaa5c..c0b5ad82 100644 --- a/_server/editor_unsorted_3.js +++ b/_server/editor_unsorted_3.js @@ -508,6 +508,10 @@ uievent.elements.selectFloor.onchange = function () { uievent.setPoint(uievent.elements.selectFloor.value); } +uievent.elements.selectPointBox.onclick = function (e) { + e.stopPropagation(); +} + uievent.elements.body.onclick = function (e) { if (uievent.mode != 'selectPoint') return; uievent.values.x = uievent.values.left + Math.floor(e.offsetX / uievent.values.size); diff --git a/libs/events.js b/libs/events.js index 0461d567..8326714d 100644 --- a/libs/events.js +++ b/libs/events.js @@ -1660,6 +1660,16 @@ events.prototype._action_strokePolygon = function (data, x, y, prefix) { core.doAction(); } +events.prototype._action_fillCircle = function (data, x, y, prefix) { + core.ui._uievent_fillCircle(data); + core.doAction(); +} + +events.prototype._action_strokeCircle = function (data, x, y, prefix) { + core.ui._uievent_strokeCircle(data); + core.doAction(); +} + events.prototype._action_drawLine = function (data, x, y, prefix) { core.ui._uievent_drawLine(data); core.doAction(); diff --git a/libs/ui.js b/libs/ui.js index 25391dbe..47fbc876 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -189,6 +189,37 @@ 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) { + 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.fill(); +} + +ui.prototype._uievent_fillCircle = function (data) { + this._createUIEvent(); + this.fillCircle('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.r), data.style); +} + +////// 在某个canvas上绘制一个圆的边框 ////// +ui.prototype.strokeCircle = function (name, x, y, r, 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.stroke(); +} + +ui.prototype._uievent_strokeCircle = function (data) { + this._createUIEvent(); + this.strokeCircle('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.r), data.style, data.lineWidth); +} + ////// 在某个canvas上绘制一条线 ////// ui.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) { if (style) core.setStrokeStyle(name, style); @@ -395,7 +426,12 @@ ui.prototype.drawIcon = function (name, id, x, y, w, h) { ui.prototype._uievent_drawIcon = function (data) { this._createUIEvent(); - this.drawIcon('uievent', data.id, core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height)); + var id; + try { + id = core.calValue(data.id); + if (typeof id !== 'string') id = data.id; + } catch (e) { id = data.id; } + this.drawIcon('uievent', id, core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height)); } ///////////////// UI绘制