ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-03 19:54:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve heartbeat bar rendering in different dpi

Browse source
This commit is contained in:
LouisLam 2021-09-05 00:08:24 +08:00
parent cc25787878
commit ffbdf97478
1 changed files with 15 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/HeartbeatBar.vue
View file

@ -31,7 +31,7 @@ export default {
beatWidth: 10, beatWidth: 10,
beatHeight: 30, beatHeight: 30,
hoverScale: 1.5, hoverScale: 1.5,
beatMargin: 3, // Odd number only, even = blurry beatMargin: 4,
move: false, move: false,
maxBeat: -1, maxBeat: -1,
} }
@ -122,29 +122,26 @@ export default {
this.$root.heartbeatList[this.monitorId] = []; this.$root.heartbeatList[this.monitorId] = [];
} }
}, },
mounted() { mounted() {
if (this.size === "small") { if (this.size === "small") {
this.beatWidth = 5;
this.beatHeight = 16; this.beatHeight = 16;
this.beatMargin = 2;
}
// Handle strange render problem in different DPI. // Suddenly, have an idea how to handle it universally.
if (window.devicePixelRatio === 1.25) { // If the pixel * ratio != Integer, then it causes render issue, round it to solve it!!
this.beatWidth = 5.6; const actualWidth = this.beatWidth * window.devicePixelRatio;
this.beatMargin = 2.4; const actualMargin = this.beatMargin * window.devicePixelRatio;
} else if (window.devicePixelRatio === 1.75) { if (! Number.isInteger(actualWidth)) {
this.beatWidth = 5.7; this.beatWidth = Math.round(actualWidth) / window.devicePixelRatio;
this.beatMargin = 2.4; console.log(this.beatWidth);
}
} else if (window.devicePixelRatio === 2.25) {
this.beatWidth = 5.8;
this.beatMargin = 2.4;
} else {
// 100%, 150%, 200% ...
this.beatWidth = 6;
this.beatMargin = 2;
}
if (! Number.isInteger(actualMargin)) {
this.beatMargin = Math.round(actualMargin) / window.devicePixelRatio;
} }
window.addEventListener("resize", this.resize); window.addEventListener("resize", this.resize);