diff --git a/public/libs/core.js b/public/libs/core.js index 60b00e6..b88388c 100644 --- a/public/libs/core.js +++ b/public/libs/core.js @@ -105,7 +105,6 @@ function core() { this.domStyle = { scale: 1.0, ratio: 1.0, - hdCanvas: ['damage', 'ui', 'data'], availableScale: [], isVertical: false, showStatusBar: true, @@ -295,16 +294,11 @@ core.prototype.init = function (coreData, callback) { var b = main.mode == 'editor'; // 初始化画布 for (var name in core.canvas) { - if (core.domStyle.hdCanvas.indexOf(name) >= 0) - core.maps._setHDCanvasSize( - core.canvas[name], - b ? core.__PIXELS__ : core._PX_, - b ? core.__PIXELS__ : core._PY_ - ); - else { - core.canvas[name].canvas.width = b ? core.__PIXELS__ : core._PX_; - core.canvas[name].canvas.height = b ? core.__PIXELS__ : core._PY_; - } + core.maps._setHDCanvasSize( + core.canvas[name], + b ? core.__PIXELS__ : core._PX_, + b ? core.__PIXELS__ : core._PY_ + ); } core.loader._load(function () { diff --git a/public/libs/maps.js b/public/libs/maps.js index 6e34b7d..6b85e2b 100644 --- a/public/libs/maps.js +++ b/public/libs/maps.js @@ -42,8 +42,8 @@ maps.prototype._setHDCanvasSize = function (ctx, width, height, isTempCanvas) { var ratio = core.domStyle.ratio; if (ctx === core.bigmap.tempCanvas) ratio = core.domStyle.scale; if (isTempCanvas) ratio = core.domStyle.ratio; - if (width != null) ctx.canvas.width = width * ratio; - if (height != null) ctx.canvas.height = height * ratio; + if (width != null) ctx.canvas.width = width * ratio * devicePixelRatio; + if (height != null) ctx.canvas.height = height * ratio * devicePixelRatio; ctx.scale(ratio, ratio); ctx.canvas.setAttribute('isHD', 1); }; @@ -634,12 +634,8 @@ maps.prototype.resizeMap = function (floorId) { var height = core.bigmap.v2 ? core._PY_ + 64 : core.bigmap.height * 32; core.bigmap.canvas.forEach(function (cn) { - if (core.domStyle.hdCanvas.indexOf(cn) >= 0) - core.maps._setHDCanvasSize(core.canvas[cn], width, height); - else { - core.canvas[cn].canvas.width = width; - core.canvas[cn].canvas.height = height; - } + core.maps._setHDCanvasSize(core.canvas[cn], width, height); + core.canvas[cn].canvas.style.width = width * core.domStyle.scale + 'px'; core.canvas[cn].canvas.style.height = height * core.domStyle.scale + 'px'; @@ -2445,7 +2441,8 @@ maps.prototype._drawAutotileAnimate = function (block, animate) { } var cv = block.name ? core.canvas[block.name] : core.canvas.event; - cv.clearRect( + core.clearMap( + cv, 32 * x - 32 * core.bigmap.posX, 32 * y - 32 * core.bigmap.posY, 32, diff --git a/public/libs/ui.js b/public/libs/ui.js index 10bc7c9..b41fd28 100644 --- a/public/libs/ui.js +++ b/public/libs/ui.js @@ -60,6 +60,12 @@ ui.prototype.clearMap = function (name, x, y, width, height) { var ctx = this.getContextByName(name); if (ctx) { if (x != null && y != null && width != null && height != null) { + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + width *= devicePixelRatio; + height *= devicePixelRatio; + } ctx.clearRect(x, y, width, height); } else { ctx.clearRect( @@ -100,6 +106,10 @@ ui.prototype.fillText = function (name, text, x, y, style, font, maxWidth) { if (font) core.setFont(name, font); var ctx = this.getContextByName(name); if (!ctx) return; + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + } text = (text + '').replace(/\\r/g, '\r'); var originText = text.replace(/\r(\[.*\])?/g, ''); var index = text.indexOf('\r'); @@ -172,6 +182,10 @@ ui.prototype.fillBoldText = function ( if (!ctx) return; if (font) ctx.font = font; if (!style) style = ctx.fillStyle; + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + } style = core.arrayToRGBA(style); if (!strokeStyle) strokeStyle = '#000000'; strokeStyle = core.arrayToRGBA(strokeStyle); @@ -203,6 +217,12 @@ ui.prototype.fillRect = function (name, x, y, width, height, style, angle) { if (style) core.setFillStyle(name, style); var ctx = this.getContextByName(name); if (ctx) { + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + width *= devicePixelRatio; + height *= devicePixelRatio; + } if (angle) { ctx.save(); ctx.translate(x + width / 2, y + height / 2); @@ -257,6 +277,12 @@ ui.prototype.strokeRect = function ( if (lineWidth) core.setLineWidth(name, lineWidth); var ctx = this.getContextByName(name); if (ctx) { + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + width *= devicePixelRatio; + height *= devicePixelRatio; + } if (angle) { ctx.save(); ctx.translate(x + width / 2, y + height / 2); @@ -312,6 +338,13 @@ ui.prototype.fillRoundRect = function ( if (style) core.setFillStyle(name, style); var ctx = this.getContextByName(name); if (ctx) { + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + width *= devicePixelRatio; + height *= devicePixelRatio; + radius *= devicePixelRatio; + } if (angle) { ctx.save(); ctx.translate(x + width / 2, y + height / 2); @@ -342,6 +375,13 @@ ui.prototype.strokeRoundRect = function ( if (lineWidth) core.setLineWidth(name, lineWidth); var ctx = this.getContextByName(name); if (ctx) { + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + width *= devicePixelRatio; + height *= devicePixelRatio; + radius *= devicePixelRatio; + } if (angle) { ctx.save(); ctx.translate(x + width / 2, y + height / 2); @@ -382,6 +422,12 @@ ui.prototype.fillPolygon = function (name, nodes, style) { if (style) core.setFillStyle(name, style); var ctx = this.getContextByName(name); if (!ctx) return; + if (ctx.canvas.getAttribute('isHD') === '1') { + nodes = nodes.map(([x, y]) => [ + x * devicePixelRatio, + y * devicePixelRatio + ]); + } if (!nodes || nodes.length < 3) return; ctx.beginPath(); for (var i = 0; i < nodes.length; ++i) { @@ -405,6 +451,12 @@ ui.prototype.strokePolygon = function (name, nodes, style, lineWidth) { if (lineWidth) core.setLineWidth(name, lineWidth); var ctx = this.getContextByName(name); if (!ctx) return; + if (ctx.canvas.getAttribute('isHD') === '1') { + nodes = nodes.map(([x, y]) => [ + x * devicePixelRatio, + y * devicePixelRatio + ]); + } if (!nodes || nodes.length < 3) return; ctx.beginPath(); for (var i = 0; i < nodes.length; ++i) { @@ -427,6 +479,12 @@ ui.prototype.fillEllipse = function (name, x, y, a, b, angle, style) { if (style) core.setFillStyle(name, style); var ctx = this.getContextByName(name); if (!ctx) return; + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + a *= devicePixelRatio; + b *= devicePixelRatio; + } ctx.beginPath(); ctx.ellipse(x, y, a, b, angle, 0, 2 * Math.PI); ctx.fill(); @@ -464,6 +522,12 @@ ui.prototype.strokeEllipse = function ( if (lineWidth) core.setLineWidth(name, lineWidth); var ctx = this.getContextByName(name); if (!ctx) return; + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + a *= devicePixelRatio; + b *= devicePixelRatio; + } ctx.beginPath(); ctx.ellipse(x, y, a, b, angle, 0, 2 * Math.PI); ctx.stroke(); @@ -491,6 +555,11 @@ ui.prototype.fillArc = function (name, x, y, r, start, end, style) { if (style) core.setFillStyle(name, style); var ctx = this.getContextByName(name); if (!ctx) return; + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + r *= devicePixelRatio; + } ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, r, start, end); @@ -525,6 +594,11 @@ ui.prototype.strokeArc = function ( if (lineWidth) core.setLineWidth(name, lineWidth); var ctx = this.getContextByName(name); if (!ctx) return; + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + r *= devicePixelRatio; + } ctx.beginPath(); ctx.arc(x, y, r, start, end); ctx.stroke(); @@ -550,6 +624,12 @@ ui.prototype.drawLine = function (name, x1, y1, x2, y2, style, lineWidth) { if (lineWidth != null) core.setLineWidth(name, lineWidth); var ctx = this.getContextByName(name); if (!ctx) return; + if (ctx.canvas.getAttribute('isHD') === '1') { + x1 *= devicePixelRatio; + y1 *= devicePixelRatio; + x2 *= devicePixelRatio; + y2 *= devicePixelRatio; + } ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); @@ -576,6 +656,12 @@ ui.prototype.drawArrow = function (name, x1, y1, x2, y2, style, lineWidth) { if (lineWidth != null) core.setLineWidth(name, lineWidth); var ctx = this.getContextByName(name); if (!ctx) return; + if (ctx.canvas.getAttribute('isHD') === '1') { + x1 *= devicePixelRatio; + y1 *= devicePixelRatio; + x2 *= devicePixelRatio; + y2 *= devicePixelRatio; + } var head = 10; var dx = x2 - x1, dy = y2 - y1; @@ -609,15 +695,31 @@ ui.prototype._uievent_drawArrow = function (data) { }; ////// 设置某个canvas的文字字体 ////// +/** + * @param {CtxRefer} name + * @param {string} font + */ ui.prototype.setFont = function (name, font) { var ctx = this.getContextByName(name); - if (ctx) ctx.font = font; + if (ctx) { + if (ctx.canvas.getAttribute('isHD') === '1') { + font = font.replace(/(\d+)(px|em|vh|vw)/, (str, $1, $2) => { + return `${parseFloat($1) * devicePixelRatio}${$2}`; + }); + } + ctx.font = font; + } }; ////// 设置某个canvas的线宽度 ////// ui.prototype.setLineWidth = function (name, lineWidth) { var ctx = this.getContextByName(name); - if (ctx) ctx.lineWidth = lineWidth; + if (ctx) { + if (ctx.canvas.getAttribute('isHD') === '1') { + lineWidth *= devicePixelRatio; + } + ctx.lineWidth = lineWidth; + } }; ////// 保存某个canvas状态 ////// @@ -768,6 +870,7 @@ ui.prototype.drawImage = function ( // 检测文件名以 :x, :y, :o 结尾,表示左右翻转,上下翻转和中心翻转 var ctx = this.getContextByName(name); if (!ctx) return; + // var reverse = null; if (typeof image == 'string') { if ( @@ -796,7 +899,14 @@ ui.prototype.drawImage = function ( w = image.width; h = image.height; } + if (x1 != null && y1 != null && w1 != null && h1 != null) { + if (ctx.canvas.getAttribute('isHD') === '1') { + x1 *= devicePixelRatio; + y1 *= devicePixelRatio; + w1 *= devicePixelRatio; + h1 *= devicePixelRatio; + } if (!reverse && !angle) { ctx.drawImage(image, x, y, w, h, x1, y1, w1, h1); } else { @@ -809,6 +919,12 @@ ui.prototype.drawImage = function ( } return; } + if (ctx.canvas.getAttribute('isHD') === '1') { + x *= devicePixelRatio; + y *= devicePixelRatio; + w *= devicePixelRatio; + h *= devicePixelRatio; + } if (!reverse && !angle) { ctx.drawImage(image, x, y, w, h); } else { @@ -844,6 +960,7 @@ ui.prototype.drawIcon = function (name, id, x, y, w, h, frame) { frame = frame || 0; var ctx = this.getContextByName(name); if (!ctx) return; + var info = core.getBlockInfo(id); if (!info) { // 检查状态栏图标 diff --git a/public/project/plugins.js b/public/project/plugins.js index a642d54..c615d01 100644 --- a/public/project/plugins.js +++ b/public/project/plugins.js @@ -636,16 +636,8 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = { document.getElementById('gameDraw').appendChild(canvas); var ctx = canvas.getContext('2d'); core.canvas[name] = ctx; - if (core.domStyle.hdCanvas.indexOf('name') >= 0) - core.maps._setHDCanvasSize( - ctx, - core.__PIXELS__, - core.__PIXELS__ - ); - else { - canvas.width = core.__PIXELS__; - canvas.height = core.__PIXELS__; - } + core.maps._setHDCanvasSize(ctx, core.__PIXELS__, core.__PIXELS__); + return canvas; } diff --git a/src/data/desc.json b/src/data/desc.json index b0d62b0..49fac54 100644 --- a/src/data/desc.json +++ b/src/data/desc.json @@ -16,7 +16,7 @@ "如果你觉得状态栏有些碍事,你完全可以将其缩小,或者把它放到不碍事的地方。", "
", "
", - "状态栏上面可能会有按钮(在开启技能树后会出现),你可以直接点击。", + "状态栏上面可能会有按钮,你可以直接点击。", "
", "
", "对状态栏布局的说明。", @@ -24,7 +24,7 @@ "本塔的状态栏的布局较为灵活。它是横向的布局,在状态栏较宽时可以看到,属性会横向依次显示。按照显示顺序,", "状态栏显示项依次为:", "
", - "1. 楼层名", + "1. 楼层名,点击后进入浏览地图界面", "
", "2. 勇士等级", "
", diff --git a/src/types/ui.d.ts b/src/types/ui.d.ts index f2184f0..73b05f8 100644 --- a/src/types/ui.d.ts +++ b/src/types/ui.d.ts @@ -822,6 +822,11 @@ interface Ui { * 清空所有的自定义画布 */ deleteAllCanvas(): void; + + /** + * 绘制浏览地图 + */ + _drawViewMaps(); } declare const ui: new () => Ui; diff --git a/src/ui/statusBar.vue b/src/ui/statusBar.vue index 2690a92..068fe22 100644 --- a/src/ui/statusBar.vue +++ b/src/ui/statusBar.vue @@ -7,7 +7,12 @@ :no-scroll="true" >
- {{ floor }} + {{ floor }} {{ lvName }}