From 267623027318d15577c82306270f8123dc52c1f8 Mon Sep 17 00:00:00 2001 From: oc Date: Sat, 8 Dec 2018 01:35:44 +0800 Subject: [PATCH] StatusBar Canvas --- libs/actions.js | 17 ++++++------- libs/control.js | 21 +++++++++------- libs/core.js | 7 ++++++ libs/ui.js | 6 +++++ project/functions.js | 58 +++++++++++++++++++++++++++++++++++++------- 5 files changed, 81 insertions(+), 28 deletions(-) diff --git a/libs/actions.js b/libs/actions.js index ceee4f34..55212e0b 100644 --- a/libs/actions.js +++ b/libs/actions.js @@ -432,16 +432,13 @@ actions.prototype.getClickLoc = function (x, y) { var size = 32; size = size * core.domStyle.scale; - switch (core.domStyle.screenMode) {// 这里的3是指statusBar和游戏画布之间的白线宽度 - case 'vertical': - statusBar.x = 0; - statusBar.y = core.dom.statusBar.offsetHeight + 3; - break; - case 'horizontal': - case 'bigScreen': - statusBar.x = core.dom.statusBar.offsetWidth + 3; - statusBar.y = 0; - break; + if (core.domStyle.isVertical) { + statusBar.x = 0; + statusBar.y = core.dom.statusBar.offsetHeight + 3; + } + else { + statusBar.x = core.dom.statusBar.offsetWidth + 3; + statusBar.y = 0; } var left = core.dom.gameGroup.offsetLeft + statusBar.x; diff --git a/libs/control.js b/libs/control.js index f533e065..d3f25f7d 100644 --- a/libs/control.js +++ b/libs/control.js @@ -2877,31 +2877,30 @@ control.prototype.updateGlobalAttribute = function (name) { if (!core.isset(attribute)) return; switch (name) { case 'statusLeftBackground': - if (core.domStyle.screenMode == 'horizontal' || core.domStyle.screenMode == 'bigScreen') { + if (!core.domStyle.isVertical) { core.dom.statusBar.style.background = attribute[name]; } break; case 'statusTopBackground': - if (core.domStyle.screenMode == 'vertical') { + if (core.domStyle.isVertical) { core.dom.statusBar.style.background = attribute[name]; } break; case 'toolsBackground': - if (core.domStyle.screenMode == 'vertical') { + if (core.domStyle.isVertical) { core.dom.toolBar.style.background = attribute[name]; } break; case 'borderColor': { var border = '3px ' + attribute[name] + ' solid'; - var isVertical = core.domStyle.screenMode == 'vertical'; core.dom.statusBar.style.borderTop = border; core.dom.statusBar.style.borderLeft = border; - core.dom.statusBar.style.borderRight = isVertical?'':border; + core.dom.statusBar.style.borderRight = core.domStyle.isVertical?'':border; core.dom.gameDraw.style.border = border; core.dom.toolBar.style.borderBottom = border; core.dom.toolBar.style.borderLeft = border; - core.dom.toolBar.style.borderRight = isVertical?'':border; + core.dom.toolBar.style.borderRight = core.domStyle.isVertical?'':border; break; } case 'statusBarColor': @@ -2928,7 +2927,7 @@ control.prototype.setToolbarButton = function (useButton) { if (!core.domStyle.showStatusBar) return; if (!core.isset(useButton)) useButton = core.domStyle.toolbarBtn; - if (core.domStyle.screenMode != 'vertical') useButton = false; + if (!core.domStyle.isVertical) useButton = false; core.domStyle.toolbarBtn = useButton; if (useButton) { @@ -2946,7 +2945,7 @@ control.prototype.setToolbarButton = function (useButton) { ["book","fly","toolbox","shop","save","load","settings"].forEach(function (t) { core.statusBar.image[t].style.display = 'block'; }); - core.statusBar.image.shop.style.display = core.domStyle.screenMode != 'vertical' ? "none":"block"; + core.statusBar.image.shop.style.display = core.domStyle.isVertical ? "block":"none"; } } @@ -3050,6 +3049,7 @@ control.prototype.resize = function(clientWidth, clientHeight) { var tempWidth = DEFAULT_CANVAS_WIDTH * scale; if(!isHorizontal){ //竖屏 core.domStyle.screenMode = 'vertical'; + core.domStyle.isVertical = true; //显示快捷商店图标 shopDisplay = 'block'; @@ -3086,6 +3086,7 @@ control.prototype.resize = function(clientWidth, clientHeight) { toolbarFontSize = DEFAULT_FONT_SIZE * scale; }else { //横屏 core.domStyle.screenMode = 'horizontal'; + core.domStyle.isVertical = false; shopDisplay = 'none'; gameGroupWidth = tempWidth + DEFAULT_BAR_WIDTH * scale; gameGroupHeight = tempWidth; @@ -3118,6 +3119,7 @@ control.prototype.resize = function(clientWidth, clientHeight) { }else { //大屏设备 pc端 core.domStyle.scale = 1; core.domStyle.screenMode = 'bigScreen'; + core.domStyle.isVertical = false; shopDisplay = 'none'; gameGroupWidth = DEFAULT_CANVAS_WIDTH + DEFAULT_BAR_WIDTH; @@ -3300,7 +3302,7 @@ control.prototype.resize = function(clientWidth, clientHeight) { core.domRenderer(); this.setToolbarButton(); - if (core.domStyle.screenMode == 'vertical') { + if (core.domStyle.isVertical) { core.dom.statusCanvas.width = 416; core.dom.statusCanvas.height = col * BASE_LINEHEIGHT + SPACE + 6; } @@ -3308,6 +3310,7 @@ control.prototype.resize = function(clientWidth, clientHeight) { core.dom.statusCanvas.width = 129; core.dom.statusCanvas.height = 416; } + this.updateStatusBar(); } ////// 渲染DOM ////// diff --git a/libs/core.js b/libs/core.js index 6a602754..1882bf8b 100644 --- a/libs/core.js +++ b/libs/core.js @@ -77,6 +77,8 @@ function core() { this.domStyle = { styles: [], scale: 1.0, + screenMode: null, + isVertical: false, toolbarBtn: false, showStatusBar: true, } @@ -1386,6 +1388,11 @@ core.prototype.updateStatusBar = function () { core.control.updateStatusBar(); } +////// 绘制状态栏 ////// +core.prototype.drawStatusBar = function () { + core.ui.drawStatusBar(); +} + ////// 屏幕分辨率改变后重新自适应 ////// core.prototype.resize = function(clientWidth, clientHeight) { core.control.resize(clientWidth, clientHeight); diff --git a/libs/ui.js b/libs/ui.js index 1be9ee61..27ba3e00 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -2394,6 +2394,12 @@ ui.prototype.drawKeyBoard = function () { core.fillText("ui", "返回游戏", 416-80, offset-3, '#FFFFFF', 'bold 15px '+globalFont); } +////// 绘制状态栏 ///// +ui.prototype.drawStatusBar = function () { + if (this.uidata.drawStatusBar) + this.uidata.drawStatusBar(); +} + ////// 绘制“数据统计”界面 ////// ui.prototype.drawStatistics = function () { diff --git a/project/functions.js b/project/functions.js index 26c747fb..4309b9d1 100644 --- a/project/functions.js +++ b/project/functions.js @@ -863,6 +863,8 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = // 难度 core.statusBar.hard.innerHTML = core.status.hard; + // 状态栏绘制 + core.drawStatusBar(); // 更新阻激夹域的伤害值 core.updateCheckBlock(); @@ -1010,18 +1012,56 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = // 如果是隐藏状态栏模式，直接返回 if (!core.domStyle.showStatusBar) return; - // 动态计算要绘制的项目 - var toDraw = core.control.needDraw(); - console.log(toDraw); + // 作为样板，只绘制楼层、生命、攻击、防御、魔防、金币、钥匙这七个内容 + // 需要其他的请自行进行修改；横竖屏都需要进行适配绘制。 + // （可以使用Chrome浏览器开控制台来模拟手机上的竖屏模式的显示效果，具体方式自行百度） + // 横屏模式下的画布大小是 129*416 + // 竖屏模式下的画布大小是 416*(32*rows+9) 其中rows为状态栏行数，即全塔属性中statusCanvasRowsOnMobile值 + // 可以使用 core.domStyle.isVertical 来判定当前是否是竖屏模式 - // 开始绘制；横竖屏分别绘制 - if (core.domStyle.screenMode != 'vertical') { - console.log("横屏"); - } - else { - console.log("竖屏"); + ctx.fillStyle = core.status.globalAttribute.statusBarColor || core.initStatus.globalAttribute.statusBarColor; + ctx.font = 'italic bold 18px Verdana'; + + // 距离左侧边框6像素，上侧边框9像素，行距约为39像素 + var leftOffset = 6, topOffset = 9, lineHeight = 39; + if (core.domStyle.isVertical) { // 竖屏模式，行高32像素 + leftOffset = 6; topOffset = 6; lineHeight = 32; } + var toDraw = ["floor", "hp", "atk", "def", "mdef", "money"]; + for (var index = 0; index < toDraw.length; index++) { + // 绘制下一个数据 + var name = toDraw[index]; + // 图片大小25x25 + ctx.drawImage(core.statusBar.icons[name], leftOffset, topOffset, 25, 25); + // 文字内容 + var text = (core.statusBar[name]||{}).innerText || " "; + // 斜体判定：如果不是纯数字，斜体会非常难看，需要取消 + if (!/^\d*$/.test(text)) ctx.font = 'bold 18px Verdana'; + // 绘制文字 + ctx.fillText(text, leftOffset + 36, topOffset + 20); + ctx.font = 'italic bold 18px Verdana'; + // 计算下一个绘制的坐标 + if (core.domStyle.isVertical) { + // 竖屏模式 + if (index % 3 != 2) leftOffset += 131; + else { + leftOffset = 6; + topOffset += lineHeight; + } + } + else { + // 横屏模式 + topOffset += lineHeight; + } + } + // 绘制三色钥匙 + ctx.fillStyle = '#FFCCAA'; + ctx.fillText(core.statusBar.yellowKey.innerText, leftOffset + 5, topOffset + 20); + ctx.fillStyle = '#AAAADD'; + ctx.fillText(core.statusBar.blueKey.innerText, leftOffset + 40, topOffset + 20); + ctx.fillStyle = '#FF8888'; + ctx.fillText(core.statusBar.redKey.innerText, leftOffset + 75, topOffset + 20); }, "drawStatistics": function () { // 浏览地图时参与的统计项目