7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-11-04 13:46:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

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