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

Fix uievent bugs & fillCircle

Browse Source
This commit is contained in:
oc 2019-06-19 23:17:54 +08:00
parent eeb9c6a912
commit 6f75c878a0
7 changed files with 150 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
_docs/event.md
View File

@ -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绘制事件。此事件可以绘制一个图片。

53
_server/MotaAction.g4
View File

@ -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([

31
_server/editor_blockly.js
View File

@ -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;

2
_server/editor_unsorted_1.js
View File

@ -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切换楼层

4
_server/editor_unsorted_3.js
View File

@ -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);

10
libs/events.js
View File

@ -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();

38
libs/ui.js
View File

@ -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绘制