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) {
if (timestamp - core.animateFrame.selectorTime <= 20 || !core.dymCanvas._selector) return;
var opacity = parseFloat(core.dymCanvas._selector.canvas.style.opacity);
if (timestamp - core.animateFrame.selectorTime <= 20) return;
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)
opacity += 0.02;
else

70
libs/events.js
View File

@ -1620,6 +1620,76 @@ events.prototype._action_exit = function (data, x, y, prefix) {
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;
}
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) {
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上绘制一段文字 //////
ui.prototype.fillText = function (name, text, x, y, style, font, maxWidth) {
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) {
// 获得当前字体
@ -94,6 +115,11 @@ ui.prototype.fillBoldText = function (name, text, x, y, style, font) {
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上绘制一个矩形 //////
ui.prototype.fillRect = function (name, x, y, width, height, 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);
}
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上绘制一个矩形的边框 //////
ui.prototype.strokeRect = function (name, x, y, width, height, style, lineWidth) {
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);
}
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上绘制一条线 //////
ui.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) {
if (style) core.setStrokeStyle(name, style);
@ -121,6 +157,11 @@ ui.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) {
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上绘制一个箭头 //////
ui.prototype.drawArrow = function (name, x1, y1, x2, y2, style, lineWidth) {
if (x1==x2 && y1==y2) return;
@ -140,6 +181,11 @@ ui.prototype.drawArrow = function (name, x1, y1, x2, y2, style, lineWidth) {
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的文字字体 //////
ui.prototype.setFont = function (name, font) {
var ctx = this.getContextByName(name);
@ -200,6 +246,17 @@ ui.prototype.setTextBaseline = function (name, 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) {
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个参数
if (core.isset(x) && core.isset(y)) {
if (core.isset(w) && core.isset(h)) {
if (core.isset(x1) && core.isset(y1) && core.isset(w1) && core.isset(h1)) {
if (x != null && y != null) {
if (w != null && h != null) {
if (x1 != null && y1 != null && w1 != null && h1 != null) {
ctx.drawImage(image, x, y, w, h, x1, y1, w1, h1);
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窗口，返回游戏进程 //////
@ -465,23 +546,44 @@ ui.prototype._getPosition = function (content) {
////// 绘制选择光标
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')
background = core.material.images.images[background];
w = Math.round(w), h = Math.round(h);
var dstImage = core.ui.createCanvas("_selector", x, y, w, h, 165);
core.setOpacity("_selector", 0.8);
if (!(background instanceof Image)) return;
// 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
dstImage.drawImage(background, 128, 64, 2, 2, 0, 0, 2, 2);
dstImage.drawImage(background, 158, 64, 2, 2,w-2, 0, 2, 2);
dstImage.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, 128, 64, 2, 2, 0, 0, 2, 2);
ctx.drawImage(background, 158, 64, 2, 2,w-2, 0, 2, 2);
ctx.drawImage(background, 128, 94, 2, 2, 0,h-2, 2, 2);
ctx.drawImage(background, 158, 94, 2, 2,w-2,h-2, 2, 2);
// border
dstImage.drawImage(background, 130, 64, 28, 2, 2, 0,w-4, 2);
dstImage.drawImage(background, 130, 94, 28, 2, 2,h-2,w-4, 2);
dstImage.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, 130, 64, 28, 2, 2, 0,w-4, 2);
ctx.drawImage(background, 130, 94, 28, 2, 2,h-2,w-4, 2);
ctx.drawImage(background, 128, 66, 2, 28, 0, 2, 2,h-4);
ctx.drawImage(background, 158, 66, 2, 28,w-2, 2, 2,h-4);
}
////// 绘制 WindowSkin
@ -543,6 +645,25 @@ ui.prototype.drawBackground = function (left, top, right, bottom, posInfo) {
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 () {
return core.getFlag("__winskin_opacity__", 0.85);
}
@ -678,6 +799,11 @@ ui.prototype.drawTextContent = function (ctx, content, config) {
tempCtx.textBaseline = _textBaseLine;
}
ui.prototype._uievent_drawTextContent = function (data) {
this._createUIEvent();
this.drawTextContent('uievent', core.replaceText(data.content), data);
}
// 绘制的基本逻辑：
// 1. 一个个字符绘制到对应画布上（靠左对齐）；这个过程中，记下来每个字对应的方块 [x, y, w, h]
// 2. 每次换行时，计算当前行的宽度，然后如果是居中或者靠右对齐，则对当前行的每个小方块增加偏移量