ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-30 18:24:03 +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,
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);