From e10b1f348a982480d35458cf88073e6be871a433 Mon Sep 17 00:00:00 2001 From: ShakeFlower Date: Wed, 26 Feb 2025 23:18:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E9=AB=98=E6=B8=85=E7=94=BB=E9=9D=A2?= =?UTF-8?q?=EF=BC=8C=E9=83=A8=E5=88=86=E6=95=B0=E5=AD=97=E6=84=8F=E4=B9=89?= =?UTF-8?q?=E4=B8=8D=E6=B8=85=E6=A5=9A=EF=BC=8C=E6=9C=89=E5=BE=85=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- libs/maps.js | 46 ++++++++++++++++++++++++++++------------------ libs/ui.js | 36 +++++++++++++++++++++++++----------- main.js | 50 +++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 96 insertions(+), 36 deletions(-) diff --git a/libs/maps.js b/libs/maps.js index 5b3880e0..e15767b3 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -51,11 +51,10 @@ maps.prototype._resetFloorImages = function () { } } -maps.prototype._setHDCanvasSize = function (ctx, width, height, isTempCanvas) { +maps.prototype._setHDCanvasSize = function (ctx, width, height) { ctx.setTransform(1, 0, 0, 1, 0, 0); - var ratio = core.domStyle.ratio; - if (ctx === core.bigmap.tempCanvas) ratio = core.domStyle.scale; - if (isTempCanvas) ratio = core.domStyle.ratio; + var ratio = core.domStyle.scale; + ratio *= devicePixelRatio; if (width != null) ctx.canvas.width = width * ratio; if (height != null) ctx.canvas.height = height * ratio; ctx.scale(ratio, ratio); @@ -1770,18 +1769,20 @@ maps.prototype._drawThumbnail_drawTempCanvas = function (floorId, blocks, option // 如果是大地图模式？ if (options.all) { // 计算比例 - var scale = Math.max(core.__SIZE__ / width, core.__SIZE__ / height); if (options.noHD) { - tempCanvas.canvas.width = width * 32 * scale; - tempCanvas.canvas.height = height * 32 * scale; - } else core.resizeCanvas(tempCanvas, width * 32 * scale, height * 32 * scale, false, true); - tempCanvas.scale(scale, scale); + tempCanvas.canvas.width = width * 32; + tempCanvas.canvas.height = height * 32; + tempCanvas.canvas.removeAttribute('isHD'); + } else { + core.maps._setHDCanvasSize(tempCanvas, width * 32, height * 32); + } } else if (width * height > core.bigmap.threshold) { options.v2 = true; if (options.noHD) { tempCanvas.canvas.width = core.__PIXELS__; tempCanvas.canvas.height = core.__PIXELS__; - } else core.resizeCanvas(tempCanvas, core.__PIXELS__, core.__PIXELS__); + tempCanvas.canvas.removeAttribute('isHD'); + } else core.maps._setHDCanvasSize(tempCanvas, width * 32, height * 32); var centerX = options.centerX, centerY = options.centerY; if (centerX == null) centerX = Math.floor(width / 2); if (centerY == null) centerY = Math.floor(height / 2); @@ -1793,7 +1794,8 @@ maps.prototype._drawThumbnail_drawTempCanvas = function (floorId, blocks, option if (options.noHD) { tempCanvas.canvas.width = width * 32; tempCanvas.canvas.height = height * 32; - } else core.resizeCanvas(tempCanvas, width * 32, height * 32, false, true); + tempCanvas.canvas.removeAttribute('isHD'); + } else core.maps._setHDCanvasSize(tempCanvas, width * 32, height * 32); } options.ctx = tempCanvas; @@ -1844,12 +1846,14 @@ maps.prototype._drawThumbnail_realDrawTempCanvas = function (floorId, blocks, op maps.prototype._drawThumbnail_drawToTarget = function (floorId, options) { var ctx = core.getContextByName(options.ctx); if (ctx == null) return; + console.log(options); var x = options.x || 0, y = options.y || 0, size = options.size || core.__PIXELS__; var width = core.floors[floorId].width, height = core.floors[floorId].height; var centerX = options.centerX, centerY = options.centerY; if (centerX == null) centerX = Math.floor(width / 2); if (centerY == null) centerY = Math.floor(height / 2); var tempCanvas = core.bigmap.tempCanvas; + const scale = core.domStyle.scale * devicePixelRatio; if (options.all) { var tempWidth = tempCanvas.canvas.width, tempHeight = tempCanvas.canvas.height; @@ -1871,17 +1875,23 @@ maps.prototype._drawThumbnail_drawToTarget = function (floorId, options) { } else { // 只绘制可见窗口 - var ratio = core.domStyle.isVertical ? core.domStyle.ratio : core.domStyle.scale; + // drawSize:默认为1，楼传为3/4，SL界面为0.3 + const drawSize = options.drawSize || 1; + const [pw, ph] = [core.__PIXELS__, core.__PIXELS__], + [hw, hh] = [core.__HALF_SIZE__, core.__HALF_SIZE__], + [W, H] = [core.__SIZE__, core.__SIZE__], + [w, h] = [core.__PIXELS__ * drawSize, core.__PIXELS__ * drawSize]; if (options.v2) { - core.drawImage(ctx, tempCanvas.canvas, 0, 0, core.__PIXELS__ * ratio, core.__PIXELS__ * ratio, x, y, size, size); + if (options.noHD) core.drawImage(ctx, tempCanvas.canvas, 0, 0, pw, ph, x, y, w, h); + else core.drawImage(ctx, tempCanvas.canvas, 0, 0, pw * scale, ph * scale, x, y, w, h); } else { - var offsetX = core.clamp(centerX - core.__HALF_SIZE__, 0, width - core.__SIZE__), - offsetY = core.clamp(centerY - core.__HALF_SIZE__, 0, height - core.__SIZE__); + const offsetX = core.clamp(centerX - hw, 0, width - W), + offsetY = core.clamp(centerY - hh, 0, height - H); if (options.noHD) { - core.drawImage(ctx, tempCanvas.canvas, offsetX * 32, offsetY * 32, core.__PIXELS__, core.__PIXELS__, x, y, size, size); - return; + core.drawImage(ctx, tempCanvas.canvas, offsetX * 32, offsetY * 32, pw, ph, x, y, w, h); + } else { + core.drawImage(ctx, tempCanvas.canvas, offsetX * 32 * scale, offsetY * 32 * scale, pw * scale, ph * scale, x, y, w, h); } - core.drawImage(ctx, tempCanvas.canvas, offsetX * 32 * ratio, offsetY * 32 * ratio, core.__PIXELS__ * ratio, core.__PIXELS__ * ratio, x, y, size, size); } } } diff --git a/libs/ui.js b/libs/ui.js index a93e1a31..0a8fc7d5 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -1127,11 +1127,11 @@ ui.prototype.drawTextContent = function (ctx, content, config) { config.offsetY = 0; config.line = 0; config.blocks = []; - config.isHD = ctx != null && ctx.canvas.hasAttribute('isHD'); + config.isHD = config.isHD = ctx == null || ctx.canvas.hasAttribute('isHD'); // 创建一个新的临时画布 var tempCtx = document.createElement('canvas').getContext('2d'); - if (config.isHD) { + if (config.isHD && ctx) { core.maps._setHDCanvasSize(tempCtx, ctx.canvas.width, ctx.canvas.height); } else { tempCtx.canvas.width = ctx == null ? 1 : ctx.canvas.width; @@ -1167,10 +1167,20 @@ ui.prototype._drawTextContent_draw = function (ctx, tempCtx, content, config) { if (config.index >= config.blocks.length) return false; var block = config.blocks[config.index++]; if (block != null) { - var ratio = config.isHD ? core.domStyle.ratio : 1; - core.drawImage(ctx, tempCtx.canvas, block.left * ratio, block.top * ratio, block.width * ratio, block.height * ratio, - config.left + block.left + block.marginLeft, config.top + block.top + block.marginTop, - block.width, block.height); + // It works, why? + const scale = config.isHD ? devicePixelRatio * core.domStyle.scale : 1; + core.drawImage( + ctx, + tempCtx.canvas, + block.left * scale, + block.top * scale, + block.width * scale, + block.height * scale, + config.left + block.left + block.marginLeft, + config.top + block.top + block.marginTop, + block.width, + block.height + ); } return true; } @@ -2568,7 +2578,8 @@ ui.prototype.drawFly = function (page) { } var size = this.PIXEL - 143; core.strokeRect('ui', 20, 100, size, size, '#FFFFFF', 2); - core.drawThumbnail(floorId, null, { ctx: 'ui', x: 20, y: 100, size: size, damage: true }); + core.drawThumbnail(floorId, null, { ctx: 'ui', x: 20, y: 100, size: size, damage: true, drawSize: 0.6 }); + // 好像是无法理解的魔数，有待将来研究及优化 } ////// 绘制中心对称飞行器 @@ -3082,7 +3093,8 @@ ui.prototype._drawSLPanel_drawRecord = function (title, data, x, y, size, cho, h core.extractBlocksForUI(map, data.hero.flags); core.drawThumbnail(data.floorId, map.blocks, { heroLoc: data.hero.loc, heroIcon: data.hero.image, flags: data.hero.flags, - ctx: 'ui', x: x - size / 2, y: y + 15, size: size, centerX: data.hero.loc.x, centerY: data.hero.loc.y, noHD: true + ctx: 'ui', x: x - size / 2, y: y + 15, size: size, centerX: data.hero.loc.x, centerY: data.hero.loc.y, noHD: true, + drawSize: 0.285, // 完全无法理解的魔数 }); if (core.isPlaying() && core.getFlag("hard") != data.hero.flags.hard) { core.fillRect('ui', x - size / 2, y + 15, size, size, [0, 0, 0, 0.4]); @@ -3509,15 +3521,17 @@ ui.prototype.rotateCanvas = function (name, angle, centerX, centerY) { } ////// canvas重置 ////// -ui.prototype.resizeCanvas = function (name, width, height, styleOnly, isTempCanvas) { +ui.prototype.resizeCanvas = function (name, width, height, styleOnly) { var ctx = core.getContextByName(name); if (!ctx) return null; if (width != null) { - if (!styleOnly) core.maps._setHDCanvasSize(ctx, width, null, isTempCanvas); + if (!styleOnly && ctx.canvas.hasAttribute('isHD')) + core.maps._setHDCanvasSize(ctx, width, null); ctx.canvas.style.width = width * core.domStyle.scale + 'px'; } if (height != null) { - if (!styleOnly) core.maps._setHDCanvasSize(ctx, null, height, isTempCanvas); + if (!styleOnly && ctx.canvas.hasAttribute('isHD')) + core.maps._setHDCanvasSize(ctx, null, height) ctx.canvas.style.height = height * core.domStyle.scale + 'px'; } return ctx; diff --git a/main.js b/main.js index 97341d0a..6aa50d3e 100644 --- a/main.js +++ b/main.js @@ -238,17 +238,53 @@ main.prototype.init = function (mode, callback) { main.core.init(coreData, callback); main.core.resize(); // 自动放缩最大化 - if (!data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d.flags.autoScale) core.setLocalStorage('autoScale', false) - else core.setLocalStorage('autoScale', true); - if (core.getLocalStorage('autoScale') && !core.domStyle.isVertical) { + if (core.getLocalStorage('autoScale') == null) { + core.setLocalStorage('autoScale', true); + } + if ( + core.getLocalStorage('autoScale') && + !core.domStyle.isVertical + ) { try { if (main.core) { - var index = main.core.domStyle.availableScale.indexOf(core.domStyle.scale); - main.core.control.setDisplayScale(main.core.domStyle.availableScale.length - 1 - index); - if (!main.core.isPlaying() && main.core.flags.enableHDCanvas) { - main.core.domStyle.ratio = Math.max(window.devicePixelRatio || 1, main.core.domStyle.scale); + var index = + main.core.domStyle.availableScale.indexOf( + core.domStyle.scale + ); + main.core.control.setDisplayScale( + main.core.domStyle.availableScale.length - + 1 - + index + ); + if ( + !main.core.isPlaying() && + main.core.flags.enableHDCanvas + ) { + main.core.domStyle.ratio = Math.max( + window.devicePixelRatio || 1, + main.core.domStyle.scale + ); main.core.resize(); } + requestAnimationFrame(function () { + var style = getComputedStyle( + main.dom.gameGroup + ); + var height = parseFloat(style.height); + if (height > window.innerHeight * 0.95) { + main.core.control.setDisplayScale(-1); + if ( + !main.core.isPlaying() && + main.core.flags.enableHDCanvas + ) { + main.core.domStyle.ratio = Math.max( + window.devicePixelRatio || 1, + main.core.domStyle.scale + ); + main.core.resize(); + } + } + }); } } catch (e) { console.error(e) }; }