高清化

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.maps._setHDCanvasSize(
+            core.canvas[name],
-                core.canvas[name],
+            b ? core.__PIXELS__ : core._PX_,
-                b ? core.__PIXELS__ : core._PX_,
+            b ? core.__PIXELS__ : core._PY_
-                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.loader._load(function () {

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 (width != null) ctx.canvas.width = width * ratio * devicePixelRatio;
-    if (height != null) ctx.canvas.height = height * ratio;
+    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);
-            core.maps._setHDCanvasSize(core.canvas[cn], width, height);
+
-        else {
-            core.canvas[cn].canvas.width = width;
-            core.canvas[cn].canvas.height = 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,

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) {
         // 检查状态栏图标

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__);
-                core.maps._setHDCanvasSize(
+
-                    ctx,
-                    core.__PIXELS__,
-                    core.__PIXELS__
-                );
-            else {
-                canvas.width = core.__PIXELS__;
-                canvas.height = core.__PIXELS__;
-            }
             return canvas;
         }
 

src/data/desc.json

@@ -16,7 +16,7 @@
             "如果你觉得状态栏有些碍事，你完全可以将其缩小，或者把它放到不碍事的地方。",
             "<br>",
             "<br>",
-            "状态栏上面可能会有按钮（在开启技能树后会出现），你可以直接点击。",
+            "状态栏上面可能会有按钮，你可以直接点击。",
             "<br>",
             "<br>",
             "对状态栏布局的说明。",
@@ -24,7 +24,7 @@
             "本塔的状态栏的布局较为灵活。它是横向的布局，在状态栏较宽时可以看到，属性会横向依次显示。按照显示顺序，",
             "状态栏显示项依次为：",
             "<br>",
-            "1. 楼层名",
+            "1. 楼层名，点击后进入浏览地图界面",
             "<br>",
             "2. 勇士等级",
             "<br>",

src/types/ui.d.ts

@@ -822,6 +822,11 @@ interface Ui {
      * 清空所有的自定义画布
      */
     deleteAllCanvas(): void;
+
+    /**
+     * 绘制浏览地图
+     */
+    _drawViewMaps();
 }
 
 declare const ui: new () => Ui;

src/ui/statusBar.vue

@@ -7,7 +7,12 @@
                 :no-scroll="true"
             >
                 <div id="status-div">
-                    <span id="status-floor">{{ floor }}</span>
+                    <span
+                        id="status-floor"
+                        @click="viewMap"
+                        class="button-text"
+                        >{{ floor }}</span
+                    >
                     <span id="status-lv">{{ lvName }}</span>
                     <div id="status-skill" class="status-item">
                         <img
@@ -179,6 +184,11 @@ function openSkill(e: MouseEvent) {
     e.stopPropagation();
     core.useItem('cross');
 }
+
+function viewMap(e: MouseEvent) {
+    e.stopPropagation();
+    core.ui._drawViewMaps();
+}
 </script>
 
 <style lang="less" scoped>