AncTe/HumanBreak
1
0
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-01-19 04:19:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

高清化

Browse Source
This commit is contained in:
unanmed 2022-12-30 16:54:50 +08:00
parent f683a25895
commit 1d274afb0d
7 changed files with 150 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/libs/core.js
View File

@ -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.loader._load(function () {

13
public/libs/maps.js
View File

@ -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.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,

121
public/libs/ui.js
View File

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

12
public/project/plugins.js
View File

@ -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;
}

4
src/data/desc.json
View File

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

5
src/types/ui.d.ts vendored
View File

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

12
src/ui/statusBar.vue
View File

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