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

绘制椭圆API

Browse Source
This commit is contained in:
ckcz123 2020-05-17 12:22:03 +08:00
parent 348aaeb857
commit d1a1f223f1
4 changed files with 51 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
_server/MotaAction.g4
View File

@ -430,8 +430,8 @@ action
| drawArrow_s | drawArrow_s
| fillPolygon_s | fillPolygon_s
| strokePolygon_s | strokePolygon_s
| fillCircle_s | fillEllipse_s
| strokeCircle_s | strokeEllipse_s
| drawImage_s | drawImage_s
| drawImage_1_s | drawImage_1_s
| drawIcon_s | drawIcon_s
@ -2339,30 +2339,32 @@ var code = '{"type": "strokePolygon", "nodes": ['+EvalString_0+']'+ColorString_0
return code; return code;
*/; */;
fillCircle_s fillEllipse_s
: '绘制圆' '圆心' 'x' PosString 'y' PosString '半径' PosString '颜色' ColorString? Colour Newline : '绘制椭圆' '中心' 'x' PosString 'y' PosString '长半径' PosString '短半径' PosString '顺时针旋转度数' PosString? '颜色' ColorString? Colour Newline
/* fillCircle_s /* fillEllipse_s
tooltip : fillCircle：绘制圆 tooltip : fillEllipse：绘制椭圆
helpUrl : https://h5mota.com/games/template/_docs/#/event?id=fillCircle%ef%bc%9a%e7%bb%98%e5%88%b6%e5%9c%86 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 colour : this.subColor
default : ["0","0","100","",null] default : ["0","0","100","100","0","",null]
ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : ''; 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; return code;
*/; */;
strokeCircle_s strokeEllipse_s
: '绘制圆边框' '圆心' 'x' PosString 'y' PosString '半径' PosString '颜色' ColorString? Colour '线宽' IntString? Newline : '绘制椭圆边框' '中心' 'x' PosString 'y' PosString '长半径' PosString '短半径' PosString '顺时针旋转度数' PosString? '颜色' ColorString? Colour '线宽' IntString? Newline
/* strokeCircle_s /* strokeEllipse_s
tooltip : strokeCircle：绘制圆边框 tooltip : strokeEllipse：绘制椭圆边框
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 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 colour : this.subColor
default : ["0","0","100","",null,""] default : ["0","0","100","100","0","",null,""]
ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : ''; ColorString_0 = ColorString_0 ? (', "style": ['+ColorString_0+']') : '';
IntString_0 = IntString_0 ? (', "lineWidth": '+IntString_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; 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 x_str.join(','), y_str.join(','), data.style, 'rgba('+data.style+')', data.lineWidth, this.next
]); ]);
break; break;
case "fillCircle": // 绘制圆 case "fillEllipse": // 绘制椭圆
data.style = this.Colour(data.style); data.style = this.Colour(data.style);
this.next = MotaActionBlocks['fillCircle_s'].xmlText([ this.next = MotaActionBlocks['fillEllipse_s'].xmlText([
data.x, data.y, data.r, data.style, 'rgba('+data.style+')', this.next data.x, data.y, data.a, data.b, data.angle, data.style, 'rgba('+data.style+')', this.next
]); ]);
break; break;
case "strokeCircle": // 绘制圆边框 case "strokeEllipse": // 绘制椭圆边框
data.style = this.Colour(data.style); data.style = this.Colour(data.style);
this.next = MotaActionBlocks['strokeCircle_s'].xmlText([ this.next = MotaActionBlocks['strokeEllipse_s'].xmlText([
data.x, data.y, data.r, data.style, 'rgba('+data.style+')', data.lineWidth, this.next data.x, data.y, data.a, data.b, data.angle, data.style, 'rgba('+data.style+')', data.lineWidth, this.next
]); ]);
break; break;
case "drawImage": // 绘制图片 case "drawImage": // 绘制图片

6
_server/editor_blockly.js
View File

@ -202,8 +202,8 @@ editor_blockly = function () {
MotaActionBlocks['drawArrow_s'].xmlText(), MotaActionBlocks['drawArrow_s'].xmlText(),
MotaActionBlocks['fillPolygon_s'].xmlText(), MotaActionBlocks['fillPolygon_s'].xmlText(),
MotaActionBlocks['strokePolygon_s'].xmlText(), MotaActionBlocks['strokePolygon_s'].xmlText(),
MotaActionBlocks['fillCircle_s'].xmlText(), MotaActionBlocks['fillEllipse_s'].xmlText(),
MotaActionBlocks['strokeCircle_s'].xmlText(), MotaActionBlocks['strokeEllipse_s'].xmlText(),
MotaActionBlocks['drawImage_s'].xmlText(), MotaActionBlocks['drawImage_s'].xmlText(),
MotaActionBlocks['drawImage_1_s'].xmlText(), MotaActionBlocks['drawImage_1_s'].xmlText(),
MotaActionBlocks['drawIcon_s'].xmlText(), MotaActionBlocks['drawIcon_s'].xmlText(),
@ -706,7 +706,7 @@ function omitedcheckUpdateFunction(event) {
var types = [ var types = [
"previewUI_s", "clearMap_s", "clearMap_1_s", "setAttribute_s", "fillText_s", "previewUI_s", "clearMap_s", "clearMap_1_s", "setAttribute_s", "fillText_s",
"fillBoldText_s", "fillRect_s", "strokeRect_s", "drawLine_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", "drawImage_s", "drawImage_1_s", "drawIcon_s", "drawBackground_s", "drawSelector_s", "drawSelector_1_s",
"waitContext_2" "waitContext_2"
]; ];

9
libs/events.js
View File

@ -1122,11 +1122,12 @@ events.prototype.__precompile_getArray = function () {
"setValue", "setEnemy", "setFloor", "setGlobalValue", "setValue", "setEnemy", "setFloor", "setGlobalValue",
]; ];
var uievents = [ var uievents = [
"clearMap", "fillText", "fillBoldText", "fillRect", "strokeRect", "strokeCircle", "clearMap", "fillText", "fillBoldText", "fillRect", "strokeRect", "fillEllipse", "strokeEllipse",
"drawIcon", "drawSelector", "drawBackground", "drawIcon", "drawSelector", "drawBackground",
]; ];
var others = { var others = {
"strokeCircle": ["r"], "fillEllipse": ["a", "b"],
"strokeEllipse": ["a", "b"],
"drawLine": ["x1", "y1", "x2", "y2"], "drawLine": ["x1", "y1", "x2", "y2"],
"drawArrow": ["x1", "y1", "x2", "y2"], "drawArrow": ["x1", "y1", "x2", "y2"],
"drawImage": ["x", "y", "w", "h", "x1", "y1", "w1", "h1"], "drawImage": ["x", "y", "w", "h", "x1", "y1", "w1", "h1"],
@ -2213,11 +2214,11 @@ events.prototype._precompile_strokePolygon = function (data) {
return 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); 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); this.__action_doUIEvent(data);
} }

28
libs/ui.js
View File

@ -238,35 +238,45 @@ ui.prototype._uievent_strokePolygon = function (data) {
this.strokePolygon('uievent', data.nodes, data.style, data.lineWidth); this.strokePolygon('uievent', data.nodes, data.style, data.lineWidth);
} }
////// 在某个canvas上绘制一个圆 ////// ////// 在某个canvas上绘制一个椭圆 //////
ui.prototype.fillCircle = function (name, x, y, r, style) { ui.prototype.fillEllipse = function (name, x, y, a, b, angle, style) {
if (style) core.setFillStyle(name, style); if (style) core.setFillStyle(name, style);
var ctx = this.getContextByName(name); var ctx = this.getContextByName(name);
if (!ctx) return; if (!ctx) return;
ctx.beginPath(); ctx.beginPath();
ctx.arc(x, y, r, 0, 2*Math.PI); ctx.ellipse(x, y, a, b, angle, 0, 2*Math.PI);
ctx.fill(); 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._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上绘制一个圆的边框 ////// ////// 在某个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 (style) core.setStrokeStyle(name, style);
if (lineWidth) core.setLineWidth(name, lineWidth); if (lineWidth) core.setLineWidth(name, lineWidth);
var ctx = this.getContextByName(name); var ctx = this.getContextByName(name);
if (!ctx) return; if (!ctx) return;
ctx.beginPath(); ctx.beginPath();
ctx.arc(x, y, r, 0, 2*Math.PI); ctx.ellipse(x, y, a, b, angle, 0, 2*Math.PI);
ctx.stroke(); 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._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上绘制一条线 ////// ////// 在某个canvas上绘制一条线 //////