From 519b88275824afb79e9c0c9c3ff8c766eb7350f2 Mon Sep 17 00:00:00 2001 From: oc Date: Thu, 6 Dec 2018 23:29:49 +0800 Subject: [PATCH] statusCanvas --- _server/data.comment.js | 12 +++ _server/functions.comment.js | 6 ++ editor-mobile.html | 11 ++- editor.html | 11 ++- index.html | 11 ++- libs/control.js | 181 ++++++++++++++--------------------- main.js | 6 +- project/data.js | 2 + project/functions.js | 22 +++++ 9 files changed, 141 insertions(+), 121 deletions(-) diff --git a/_server/data.comment.js b/_server/data.comment.js index 7e7e136a..ab8ddd6e 100644 --- a/_server/data.comment.js +++ b/_server/data.comment.js @@ -564,6 +564,18 @@ var data_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = "_bool": "bool", "_data": "点击“开始游戏”后是否立刻开始游戏而不显示难度选择界面" }, + "statusCanvas": { + "_leaf": true, + "_type": "checkbox", + "_bool": "bool", + "_data": "是否状态栏canvas化，即手动自定义绘制状态栏。\n如果此项开启，则可在脚本编辑的drawStatusBar中自定义绘制菜单栏。" + }, + "statusCanvasRowsOnMobile": { + "_leaf": true, + "_type": "textarea", + "_range": "thiseval==null || (thiseval>0 && thiseval<=4)", + "_data": "竖屏模式下，顶端状态栏canvas化后的行数。\n此项将决定竖屏的状态栏高度，如果设置则不小于1且不大于4。\n仅在statusCanvas开启时才有效" + }, "canOpenBattleAnimate": { "_leaf": true, "_type": "checkbox", diff --git a/_server/functions.comment.js b/_server/functions.comment.js index d7fb4499..ae97a7cd 100644 --- a/_server/functions.comment.js +++ b/_server/functions.comment.js @@ -169,6 +169,12 @@ var functions_comment_c456ea59_6018_45ef_8bcc_211a24c627dc = "_leaf": false, "_type": "object", "_data": { + "drawStatusBar": { + "_leaf": true, + "_type": "textarea", + "_lint": true, + "_data": "自定义绘制状态栏。\n当状态栏canvas化开启时，可以在这里对状态栏进行自定义绘制。\n仅当statusCanvas开启时有效。" + }, "drawStatistics": { "_leaf": true, "_type": "textarea", diff --git a/editor-mobile.html b/editor-mobile.html index 89b98714..c3396905 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -353,7 +353,7 @@

-
+

@@ -361,11 +361,11 @@

-
+

-
+

@@ -377,7 +377,7 @@

-
+

@@ -404,6 +404,9 @@
+ + +
diff --git a/editor.html b/editor.html index b5f76989..54cdb46e 100644 --- a/editor.html +++ b/editor.html @@ -339,7 +339,7 @@

-
+

@@ -347,11 +347,11 @@

-
+

-
+

@@ -363,7 +363,7 @@

-
+

@@ -390,6 +390,9 @@
+ + +
diff --git a/index.html b/index.html index 4e65f98a..8fe217e5 100644 --- a/index.html +++ b/index.html @@ -58,7 +58,7 @@

-
+

@@ -66,11 +66,11 @@

-
+

-
+

@@ -82,7 +82,7 @@

-
+

@@ -109,6 +109,9 @@
+ + +
diff --git a/libs/control.js b/libs/control.js index 0c15502b..c413b999 100644 --- a/libs/control.js +++ b/libs/control.js @@ -2907,6 +2907,36 @@ control.prototype.setToolbarButton = function (useButton) { } } +control.prototype.needDraw = function(id) { + if (!core.isset(id)) { + var toDraw = [], status = core.dom.status; + for (var i = 0; i12) alert("当前状态栏数目("+count+")大于12，请调整到不超过12以避免手机端出现显示问题。"); + if (!statusCanvas && count>12) alert("当前状态栏数目("+count+")大于12，请调整到不超过12以避免手机端出现显示问题。"); + var col = Math.ceil(count / 3); + if (statusCanvas) col = statusCanvasRows; var statusLineHeight = BASE_LINEHEIGHT * 9 / count; var statusLineFontSize = DEFAULT_FONT_SIZE; @@ -2988,9 +3009,6 @@ control.prototype.resize = function(clientWidth, clientHeight) { core.domStyle.screenMode = 'vertical'; //显示快捷商店图标 shopDisplay = 'block'; - //判断应该显示几行 - // var col = core.flags.enableMDef || core.flags.enableExperience || core.flags.enableDebuff ? 3 : 2; - var col = parseInt((count-1)/3)+1; var tempTopBarH = scale * (BASE_LINEHEIGHT * col + SPACE * 2) + 6; var tempBotBarH = scale * (BASE_LINEHEIGHT + SPACE * 4) + 6; @@ -2998,6 +3016,8 @@ control.prototype.resize = function(clientWidth, clientHeight) { gameGroupHeight = tempWidth + tempTopBarH + tempBotBarH; gameGroupWidth = tempWidth + statusCanvasWidth = canvasWidth; + statusCanvasHeight = tempTopBarH; canvasTop = tempTopBarH; // canvasLeft = 0; toolBarWidth = statusBarWidth = canvasWidth; @@ -3031,6 +3051,8 @@ control.prototype.resize = function(clientWidth, clientHeight) { toolBarWidth = statusBarWidth = DEFAULT_BAR_WIDTH * scale; statusBarHeight = gameGroupHeight - SPACE; statusBarBorder = '3px '+borderColor+' solid'; + statusCanvasWidth = toolBarWidth + SPACE; + statusCanvasHeight = statusBarHeight; statusBackground = (core.status.globalAttribute||core.initStatus.globalAttribute).statusLeftBackground; statusHeight = scale*statusLineHeight * .8; @@ -3065,6 +3087,8 @@ control.prototype.resize = function(clientWidth, clientHeight) { // statusBarHeight = statusLineHeight * count + SPACE * 2; //一共有9行 statusBackground = (core.status.globalAttribute||core.initStatus.globalAttribute).statusLeftBackground; statusBarHeight = gameGroupHeight - SPACE; + statusCanvasWidth = toolBarWidth + SPACE; + statusCanvasHeight = statusBarHeight; statusHeight = statusLineHeight * .8; statusLabelsLH = .8 * statusLineHeight; @@ -3100,6 +3124,14 @@ control.prototype.resize = function(clientWidth, clientHeight) { height: (canvasWidth - SPACE*2) + unit, } }, + { + id: 'statusCanvas', + rules: { + width: (statusCanvasWidth - SPACE*2) + unit, + height: (statusCanvasHeight - SPACE) + unit, + display: statusCanvas?'block':'none' + } + }, { id: 'gif', rules: { @@ -3114,15 +3146,6 @@ control.prototype.resize = function(clientWidth, clientHeight) { height:(canvasWidth - SPACE*2) + unit, } }, - /* - { - id: 'curtain', - rules: { - width: (canvasWidth - SPACE*2) + unit, - height:(canvasWidth - SPACE*2) + unit, - } - }, - */ { id: 'gameDraw', rules: { @@ -3166,7 +3189,8 @@ control.prototype.resize = function(clientWidth, clientHeight) { width: '100%', maxWidth: statusMaxWidth + unit, height: statusHeight + unit, - margin: margin/2 + unit + margin: margin/2 + unit, + display: !statusCanvas?'block':'none' } }, { @@ -3212,84 +3236,6 @@ control.prototype.resize = function(clientWidth, clientHeight) { display: shopDisplay && core.domStyle.showStatusBar } }, - { - id: 'floorCol', - rules: { - display: core.flags.enableFloor ? 'block': 'none' - } - }, - { - id: 'nameCol', - rules: { - display: core.flags.enableName ? 'block': 'none' - } - }, - { - id: 'lvCol', - rules: { - display: core.flags.enableLv ? 'block': 'none' - } - }, - { - id: 'hpmaxCol', - rules: { - display: core.flags.enableHPMax ? 'block': 'none' - } - }, - { - id: 'manaCol', - rules: { - display: core.flags.enableMana ? 'block': 'none' - } - }, - { - id: 'mdefCol', - rules: { - display: core.flags.enableMDef ? 'block': 'none' - } - }, - { - id: 'moneyCol', - rules: { - display: core.flags.enableMoney ? 'block': 'none' - } - }, - { - id: 'expCol', - rules: { - display: core.flags.enableExperience && !core.flags.levelUpLeftMode ? 'block': 'none' - } - }, - { - id: 'upCol', - rules: { - display: core.flags.enableLevelUp ? 'block': 'none' - } - }, - { - id: 'skillCol', - rules: { - display: core.flags.enableSkill ? 'block': 'none' - } - }, - { - id: 'keyCol', - rules: { - display: !core.isset(core.flags.enableKeys)||core.flags.enableKeys?'block':'none' - } - }, - { - id: 'pzfCol', - rules: { - display: core.flags.enablePZF?'block':'none' - } - }, - { - 'id': 'debuffCol', - rules: { - display: core.flags.enableDebuff ? 'block': 'none' - } - }, { id: 'hard', rules: { @@ -3298,8 +3244,27 @@ control.prototype.resize = function(clientWidth, clientHeight) { } }, ] + for (var i = 0; i < core.dom.status.length; ++i) { + var id = core.dom.status[i].id; + core.domStyle.styles.push({ + id: id, + rules: { + display: toDraw.indexOf(id.substring(0, id.length-3))>=0 && !statusCanvas ? "block": "none" + } + }); + } + core.domRenderer(); this.setToolbarButton(); + + if (core.domStyle.screenMode == 'vertical') { + core.dom.statusCanvas.width = 416; + core.dom.statusCanvas.height = col * BASE_LINEHEIGHT + SPACE + 6; + } + else { + core.dom.statusCanvas.width = 129; + core.dom.statusCanvas.height = 416; + } } ////// 渲染DOM ////// diff --git a/main.js b/main.js index 2ff39470..0ea10df4 100644 --- a/main.js +++ b/main.js @@ -55,16 +55,20 @@ function main() { 'nameCol': document.getElementById('nameCol'), 'lvCol': document.getElementById('lvCol'), 'hpmaxCol': document.getElementById('hpmaxCol'), + 'hpCol': document.getElementById('hpCol'), 'manaCol': document.getElementById('manaCol'), + 'atkCol': document.getElementById('atkCol'), + 'defCol': document.getElementById('defCol'), 'mdefCol': document.getElementById('mdefCol'), 'moneyCol': document.getElementById('moneyCol'), - 'expCol': document.getElementById('expCol'), + 'experienceCol': document.getElementById('experienceCol'), 'upCol': document.getElementById('upCol'), 'keyCol': document.getElementById('keyCol'), 'pzfCol': document.getElementById('pzfCol'), 'debuffCol': document.getElementById('debuffCol'), 'skillCol': document.getElementById('skillCol'), 'hard': document.getElementById('hard'), + 'statusCanvas': document.getElementById('statusCanvas') }; this.mode = 'play'; this.loadList = [ diff --git a/project/data.js b/project/data.js index 41c36ba7..c4a85d72 100644 --- a/project/data.js +++ b/project/data.js @@ -369,6 +369,8 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d = "useLoop": false, "startUsingCanvas": false, "startDirectly": false, + "statusCanvas": false, + "statusCanvasRowsOnMobile": 3, "canOpenBattleAnimate": true, "showBattleAnimateConfirm": false, "battleAnimate": false, diff --git a/project/functions.js b/project/functions.js index 98fbcb24..c1011e77 100644 --- a/project/functions.js +++ b/project/functions.js @@ -998,6 +998,28 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = } }, "ui": { + "drawStatusBar": function () { + // 如果是非状态栏canvas化，直接返回 + if (!core.flags.statusCanvas) return; + var canvas = core.dom.statusCanvas, ctx = canvas.getContext('2d'); + // 清空状态栏 + ctx.clearRect(0, 0, canvas.width, canvas.height); + // 如果是隐藏状态栏模式，直接返回 + if (!core.domStyle.showStatusBar) return; + + // 动态计算要绘制的项目 + var toDraw = core.control.needDraw(); + console.log(toDraw); + + // 开始绘制；横竖屏分别绘制 + if (core.domStyle.screenMode != 'vertical') { + console.log("横屏"); + } + else { + console.log("竖屏"); + } + +}, "drawStatistics": function () { // 浏览地图时参与的统计项目