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"
>