Infra-Mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-17 11:44:38 -05: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
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;
// 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; 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); window.addEventListener("resize", this.resize);