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

uievent runtime

Browse Source
This commit is contained in:
oc 2019-05-26 13:58:08 +08:00
parent a57771d1bf
commit 304bd80bbc
3 changed files with 216 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
libs/control.js
View File

@ -152,8 +152,11 @@ control.prototype._animationFrame_globalAnimate = function (timestamp) {
} }
control.prototype._animationFrame_selector = function (timestamp) { control.prototype._animationFrame_selector = function (timestamp) {
if (timestamp - core.animateFrame.selectorTime <= 20 || !core.dymCanvas._selector) return; if (timestamp - core.animateFrame.selectorTime <= 20) return;
var opacity = parseFloat(core.dymCanvas._selector.canvas.style.opacity); var opacity = null;
if (core.dymCanvas._selector) opacity = parseFloat(core.dymCanvas._selector.canvas.style.opacity);
else if (core.dymCanvas._uievent_selector) opacity = parseFloat(core.dymCanvas._uievent_selector.canvas.style.opacity);
if (!core.isset(opacity)) return;
if (core.animateFrame.selectorUp) if (core.animateFrame.selectorUp)
opacity += 0.02; opacity += 0.02;
else else

70
libs/events.js
View File

@ -1620,6 +1620,76 @@ events.prototype._action_exit = function (data, x, y, prefix) {
core.doAction(); core.doAction();
} }
events.prototype._action_previewUIEvent = function (data, x, y, prefix) {
this.insert(data.action);
core.doAction();
}
events.prototype._action_clearMap = function (data, x, y, prefix) {
core.ui._uievent_clearMap(data);
core.doAction();
}
events.prototype._action_fillText = function (data, x, y, prefix) {
core.ui._uievent_fillText(data);
core.doAction();
}
events.prototype._action_fillBoldText = function (data, x, y, prefix) {
core.ui._uievent_fillBoldText(data);
core.doAction();
}
events.prototype._action_fillRect = function (data, x, y, prefix) {
core.ui._uievent_fillRect(data);
core.doAction();
}
events.prototype._action_strokeRect = function (data, x, y, prefix) {
core.ui._uievent_strokeRect(data);
core.doAction();
}
events.prototype._action_drawLine = function (data, x, y, prefix) {
core.ui._uievent_drawLine(data);
core.doAction();
}
events.prototype._action_drawArrow = function (data, x, y, prefix) {
core.ui._uievent_drawArrow(data);
core.doAction();
}
events.prototype._action_setAttribute = function (data, x, y, prefix) {
core.ui._uievent_setAttribute(data);
core.doAction();
}
events.prototype._action_drawImage = function (data, x, y, prefix) {
core.ui._uievent_drawImage(data);
core.doAction();
}
events.prototype._action_drawIcon = function (data, x, y, prefix) {
core.ui._uievent_drawIcon(data);
core.doAction();
}
events.prototype._action_drawSelector = function (data, x, y, prefix) {
core.ui._uievent_drawSelector(data);
core.doAction();
}
events.prototype._action_drawBackground = function (data, x, y, prefix) {
core.ui._uievent_drawBackground(data);
core.doAction();
}
events.prototype._action_drawTextContent = function (data, x, y, prefix) {
core.ui._uievent_drawTextContent(data);
core.doAction();
}
// ------ 点击状态栏图标所进行的一些操作 ------ // // ------ 点击状态栏图标所进行的一些操作 ------ //
////// 判断当前能否进入某个事件 ////// ////// 判断当前能否进入某个事件 //////

156
libs/ui.js
View File

@ -37,6 +37,13 @@ ui.prototype.getContextByName = function (name) {
return null; return null;
} }
ui.prototype._createUIEvent = function () {
if (main.mode == 'editor') return;
if (!core.dymCanvas['uievent']) {
core.createCanvas('uievent', 0, 0, this.PIXEL, this.PIXEL, 135);
}
}
////// 清除地图 ////// ////// 清除地图 //////
ui.prototype.clearMap = function (name, x, y, width, height) { ui.prototype.clearMap = function (name, x, y, width, height) {
if (name == 'all') { if (name == 'all') {
@ -52,6 +59,15 @@ ui.prototype.clearMap = function (name, x, y, width, height) {
} }
} }
ui.prototype._uievent_clearMap = function (data) {
if (main.mode != 'editor' && (data.x == null || data.y == null || data.width == null || data.height == null)) {
this.deleteCanvas('uievent');
return;
}
this._createUIEvent();
this.clearMap('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height));
}
////// 在某个canvas上绘制一段文字 ////// ////// 在某个canvas上绘制一段文字 //////
ui.prototype.fillText = function (name, text, x, y, style, font, maxWidth) { ui.prototype.fillText = function (name, text, x, y, style, font, maxWidth) {
if (style) core.setFillStyle(name, style); if (style) core.setFillStyle(name, style);
@ -66,6 +82,11 @@ ui.prototype.fillText = function (name, text, x, y, style, font, maxWidth) {
} }
} }
ui.prototype._uievent_fillText = function (data) {
this._createUIEvent();
this.fillText('uievent', core.replaceText(data.text), core.calValue(data.x), core.calValue(data.y), data.style, data.font, data.maxWidth);
}
////// 自适配字体大小 ////// 自适配字体大小
ui.prototype._fillTextWithMaxWidth = function (ctx, text, x, y, maxWidth) { ui.prototype._fillTextWithMaxWidth = function (ctx, text, x, y, maxWidth) {
// 获得当前字体 // 获得当前字体
@ -94,6 +115,11 @@ ui.prototype.fillBoldText = function (name, text, x, y, style, font) {
ctx.fillText(text, x, y); ctx.fillText(text, x, y);
} }
ui.prototype._uievent_fillBoldText = function (data) {
this._createUIEvent();
this.fillBoldText('uievent', core.replaceText(data.text), core.calValue(data.x), core.calValue(data.y), data.style, data.font);
}
////// 在某个canvas上绘制一个矩形 ////// ////// 在某个canvas上绘制一个矩形 //////
ui.prototype.fillRect = function (name, x, y, width, height, style) { ui.prototype.fillRect = function (name, x, y, width, height, style) {
if (style) core.setFillStyle(name, style); if (style) core.setFillStyle(name, style);
@ -101,6 +127,11 @@ ui.prototype.fillRect = function (name, x, y, width, height, style) {
if (ctx) ctx.fillRect(x, y, width, height); if (ctx) ctx.fillRect(x, y, width, height);
} }
ui.prototype._uievent_fillRect = function (data) {
this._createUIEvent();
this.fillRect('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height), data.style);
}
////// 在某个canvas上绘制一个矩形的边框 ////// ////// 在某个canvas上绘制一个矩形的边框 //////
ui.prototype.strokeRect = function (name, x, y, width, height, style, lineWidth) { ui.prototype.strokeRect = function (name, x, y, width, height, style, lineWidth) {
if (style) core.setStrokeStyle(name, style); if (style) core.setStrokeStyle(name, style);
@ -109,6 +140,11 @@ ui.prototype.strokeRect = function (name, x, y, width, height, style, lineWidth)
if (ctx) ctx.strokeRect(x, y, width, height); if (ctx) ctx.strokeRect(x, y, width, height);
} }
ui.prototype._uievent_strokeRect = function (data) {
this._createUIEvent();
this.strokeRect('uievent', core.calValue(data.x), core.calValue(data.y), core.calValue(data.width), core.calValue(data.height), data.style, data.lineWidth);
}
////// 在某个canvas上绘制一条线 ////// ////// 在某个canvas上绘制一条线 //////
ui.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) { ui.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) {
if (style) core.setStrokeStyle(name, style); if (style) core.setStrokeStyle(name, style);
@ -121,6 +157,11 @@ ui.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) {
ctx.stroke(); ctx.stroke();
} }
ui.prototype._uievent_drawLine = function (data) {
this._createUIEvent();
this.drawLine('uievent', core.calValue(data.x1), core.calValue(data.y1), core.calValue(data.x2), core.calValue(data.y2), data.style, data.lineWidth);
}
////// 在某个canvas上绘制一个箭头 ////// ////// 在某个canvas上绘制一个箭头 //////
ui.prototype.drawArrow = function (name, x1, y1, x2, y2, style, lineWidth) { ui.prototype.drawArrow = function (name, x1, y1, x2, y2, style, lineWidth) {
if (x1==x2 && y1==y2) return; if (x1==x2 && y1==y2) return;
@ -140,6 +181,11 @@ ui.prototype.drawArrow = function (name, x1, y1, x2, y2, style, lineWidth) {
ctx.stroke(); ctx.stroke();
} }
ui.prototype._uievent_drawArrow = function (data) {
this._createUIEvent();
this.drawArrow('uievent', core.calValue(data.x1), core.calValue(data.y1), core.calValue(data.x2), core.calValue(data.y2), data.style, data.lineWidth);
}
////// 设置某个canvas的文字字体 ////// ////// 设置某个canvas的文字字体 //////
ui.prototype.setFont = function (name, font) { ui.prototype.setFont = function (name, font) {
var ctx = this.getContextByName(name); var ctx = this.getContextByName(name);
@ -200,6 +246,17 @@ ui.prototype.setTextBaseline = function (name, baseline) {
if (ctx) ctx.textBaseline = baseline; if (ctx) ctx.textBaseline = baseline;
} }
ui.prototype._uievent_setAttribute = function (data) {
this._createUIEvent();
if (data.font) this.setFont('uievent', data.font);
if (data.lineWidth) this.setLineWidth('uievent', data.lineWidth);
if (data.alpha != null) this.setAlpha('uievent', data.alpha);
if (data.fillStyle) this.setFillStyle('uievent', data.fillStyle);
if (data.strokeStyle) this.setStrokeStyle('uievent', data.strokeStyle);
if (data.align) this.setTextAlign('uievent', data.align);
if (data.baseline) this.setTextBaseline('uievent', data.baseline);
}
////// 计算某段文字的宽度 ////// ////// 计算某段文字的宽度 //////
ui.prototype.calWidth = function (name, text, font) { ui.prototype.calWidth = function (name, text, font) {
var ctx = this.getContextByName(name); var ctx = this.getContextByName(name);
@ -251,9 +308,9 @@ ui.prototype.drawImage = function (name, image, x, y, w, h, x1, y1, w1, h1) {
} }
// 只能接受2, 4, 8个参数 // 只能接受2, 4, 8个参数
if (core.isset(x) && core.isset(y)) { if (x != null && y != null) {
if (core.isset(w) && core.isset(h)) { if (w != null && h != null) {
if (core.isset(x1) && core.isset(y1) && core.isset(w1) && core.isset(h1)) { if (x1 != null && y1 != null && w1 != null && h1 != null) {
ctx.drawImage(image, x, y, w, h, x1, y1, w1, h1); ctx.drawImage(image, x, y, w, h, x1, y1, w1, h1);
return; return;
} }
@ -265,6 +322,30 @@ ui.prototype.drawImage = function (name, image, x, y, w, h, x1, y1, w1, h1) {
} }
} }
ui.prototype._uievent_drawImage = function (data) {
this._createUIEvent();
this.drawImage(data.name, core.calValue(data.x), core.calValue(data.y), core.calValue(data.w), core.calValue(data.h),
core.calValue(data.x1), core.calValue(data.y1), core.calValue(data.w1), core.calValue(data.h1));
}
ui.prototype.drawIcon = function (name, id, x, y, w, h) {
var ctx = this.getContextByName(name);
if (!ctx) return;
var info = core.getBlockInfo(id);
if (!info) {
// 检查状态栏图标
if (core.statusBar.icons[id] instanceof Image)
info = {image: core.statusBar.icons[id], posX: 0, posY: 0, height: 32};
else return;
}
ctx.drawImage(info.image, 32 * info.posX, info.height * info.posY, 32, info.height, x, y, w || 32, h || info.height);
}
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));
}
///////////////// UI绘制 ///////////////// UI绘制
////// 结束一切事件和绘制，关闭UI窗口，返回游戏进程 ////// ////// 结束一切事件和绘制，关闭UI窗口，返回游戏进程 //////
@ -465,23 +546,44 @@ ui.prototype._getPosition = function (content) {
////// 绘制选择光标 ////// 绘制选择光标
ui.prototype.drawWindowSelector = function(background, x, y, w, h) { ui.prototype.drawWindowSelector = function(background, x, y, w, h) {
w = Math.round(w), h = Math.round(h);
var ctx = core.ui.createCanvas("_selector", x, y, w, h, 165);
ctx.canvas.style.opacity = 0.8;
this._drawSelector(ctx, background, x, y, w, h);
}
ui.prototype._uievent_drawSelector = function (data) {
var background = data.background || core.status.textAttribute.background;
if (typeof background != 'string') return;
var x = core.calValue(data.x), y = core.calValue(data.y), w = core.calValue(data.width), h = core.calValue(data.height);
w = Math.round(w); h = Math.round(h);
if (main.mode == 'editor') {
this._drawSelector('uievent', background, x, y, w, h);
return;
}
var ctx = core.createCanvas('_uievent_selector', x, y, w, h, 136);
ctx.canvas.style.opacity = 0.8;
this._drawSelector(ctx, background, x, y, w, h);
}
ui.prototype._drawSelector = function (ctx, background, x, y, w, h) {
ctx = this.getContextByName(ctx);
if (!ctx) return;
if (typeof background == 'string') if (typeof background == 'string')
background = core.material.images.images[background]; background = core.material.images.images[background];
w = Math.round(w), h = Math.round(h); if (!(background instanceof Image)) return;
var dstImage = core.ui.createCanvas("_selector", x, y, w, h, 165);
core.setOpacity("_selector", 0.8);
// back // back
dstImage.drawImage(background, 130, 66, 28, 28, 2, 2,w-4,h-4); ctx.drawImage(background, 130, 66, 28, 28, 2, 2,w-4,h-4);
// corner // corner
dstImage.drawImage(background, 128, 64, 2, 2, 0, 0, 2, 2); ctx.drawImage(background, 128, 64, 2, 2, 0, 0, 2, 2);
dstImage.drawImage(background, 158, 64, 2, 2,w-2, 0, 2, 2); ctx.drawImage(background, 158, 64, 2, 2,w-2, 0, 2, 2);
dstImage.drawImage(background, 128, 94, 2, 2, 0,h-2, 2, 2); ctx.drawImage(background, 128, 94, 2, 2, 0,h-2, 2, 2);
dstImage.drawImage(background, 158, 94, 2, 2,w-2,h-2, 2, 2); ctx.drawImage(background, 158, 94, 2, 2,w-2,h-2, 2, 2);
// border // border
dstImage.drawImage(background, 130, 64, 28, 2, 2, 0,w-4, 2); ctx.drawImage(background, 130, 64, 28, 2, 2, 0,w-4, 2);
dstImage.drawImage(background, 130, 94, 28, 2, 2,h-2,w-4, 2); ctx.drawImage(background, 130, 94, 28, 2, 2,h-2,w-4, 2);
dstImage.drawImage(background, 128, 66, 2, 28, 0, 2, 2,h-4); ctx.drawImage(background, 128, 66, 2, 28, 0, 2, 2,h-4);
dstImage.drawImage(background, 158, 66, 2, 28,w-2, 2, 2,h-4); ctx.drawImage(background, 158, 66, 2, 28,w-2, 2, 2,h-4);
} }
////// 绘制 WindowSkin ////// 绘制 WindowSkin
@ -543,6 +645,25 @@ ui.prototype.drawBackground = function (left, top, right, bottom, posInfo) {
return false; return false;
} }
ui.prototype._uievent_drawBackground = function (data) {
this._createUIEvent();
var background = data.background || core.status.textAttribute.background;
var x = core.calValue(data.x), y = core.calValue(data.y), w = core.calValue(data.width), h = core.calValue(data.height);
if (typeof background == 'string') {
if (data.alpha != null) this.setAlpha('uievent', data.alpha);
this.drawWindowSkin(background, 'uievent', x, y, w, h);
}
else if (background instanceof Array) {
var alpha = background[3];
if (alpha == null) alpha = 1;
if (data.alpha != null) alpha = data.alpha;
this.setAlpha('uievent', alpha);
this.setLineWidth('uievent', 2);
this.fillRect('uievent', x, y, w, h, core.arrayToRGB(background));
this.strokeRect('uievent', x, y, w, h, core.status.globalAttribute.borderColor);
}
}
ui.prototype._drawWindowSkin_getOpacity = function () { ui.prototype._drawWindowSkin_getOpacity = function () {
return core.getFlag("__winskin_opacity__", 0.85); return core.getFlag("__winskin_opacity__", 0.85);
} }
@ -678,6 +799,11 @@ ui.prototype.drawTextContent = function (ctx, content, config) {
tempCtx.textBaseline = _textBaseLine; tempCtx.textBaseline = _textBaseLine;
} }
ui.prototype._uievent_drawTextContent = function (data) {
this._createUIEvent();
this.drawTextContent('uievent', core.replaceText(data.content), data);
}
// 绘制的基本逻辑： // 绘制的基本逻辑：
// 1. 一个个字符绘制到对应画布上（靠左对齐）；这个过程中，记下来每个字对应的方块 [x, y, w, h] // 1. 一个个字符绘制到对应画布上（靠左对齐）；这个过程中，记下来每个字对应的方块 [x, y, w, h]
// 2. 每次换行时，计算当前行的宽度，然后如果是居中或者靠右对齐，则对当前行的每个小方块增加偏移量 // 2. 每次换行时，计算当前行的宽度，然后如果是居中或者靠右对齐，则对当前行的每个小方块增加偏移量