From 304bd80bbcd2936c864c28789bcca2d2a28beff6 Mon Sep 17 00:00:00 2001 From: oc Date: Sun, 26 May 2019 13:58:08 +0800 Subject: [PATCH] uievent runtime --- libs/control.js | 7 ++- libs/events.js | 70 ++++++++++++++++++++++ libs/ui.js | 156 +++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 216 insertions(+), 17 deletions(-) diff --git a/libs/control.js b/libs/control.js index d3289e37..905be87f 100644 --- a/libs/control.js +++ b/libs/control.js @@ -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 diff --git a/libs/events.js b/libs/events.js index 41a3b1c7..67d409e8 100644 --- a/libs/events.js +++ b/libs/events.js @@ -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(); +} + // ------ 点击状态栏图标所进行的一些操作 ------ // ////// 判断当前能否进入某个事件 ////// diff --git a/libs/ui.js b/libs/ui.js index 21ce736e..f06a9a87 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -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. 每次换行时，计算当前行的宽度，然后如果是居中或者靠右对齐，则对当前行的每个小方块增加偏移量