m4xx1m/dv-community-map
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix blur on high DPI screens

Browse Source
This commit is contained in:
Pyro Nicampt committed 2025-03-21 12:53:50 -05:00
1 parent ebdbb1e979
commit 1c4093481e
4 files changed
+37 -35
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+1 -1
View File
@@ -15,7 +15,7 @@
</head>
<body>
<div id="mapContainer">
<canvas id="mapCanvas"></canvas>
<canvas id="mapCanvas" style="width:100%;height:100%"></canvas>
<div id="tooltip" class="panel" style="display:none"></div>
</div>
index.js
+31 -30
View File
@@ -250,21 +250,22 @@ async function loadPoiData(file){
let railTrack = {};
let curve = {};
function redrawMap(){
mapCanvas.width = mapContainer.clientWidth;
mapCanvas.height = mapContainer.clientHeight;
zoomLevelDisplay.innerHTML = `Zoom: ${MapData.view.scale.toFixed(3)}x / ${(1/MapData.view.scale).toFixed(2)} m/px`;
MapData.view.pixelRatio = window.devicePixelRatio;
mapCanvas.width = mapContainer.clientWidth * MapData.view.pixelRatio;
mapCanvas.height = mapContainer.clientHeight * MapData.view.pixelRatio;
zoomLevelDisplay.innerHTML = `Zoom: ${(MapData.view.scale*MapData.view.pixelRatio).toFixed(3)}x / ${(1/(MapData.view.scale*MapData.view.pixelRatio)).toFixed(2)} m/px`;
if(MapData.layers.terrain){
mapctx.drawImage(
mapTerrain,
MapData.view.convertX(0),
MapData.view.convertY(16384),
16384 * MapData.view.scale,
16384 * MapData.view.scale
16384 * MapData.view.scale * MapData.view.pixelRatio,
16384 * MapData.view.scale * MapData.view.pixelRatio
);
}
// Game gauge is 1.5 meter
const trackWidth = Math.min(Math.max(6, MapData.view.scale * 1.5), MapData.view.scale * 100);
const trackWidth = Math.min(Math.max(6, MapData.view.scale * 1.5), MapData.view.scale * 100) * MapData.view.pixelRatio;
mapctx.lineWidth = trackWidth;
for(const railTrack of MapData.railTracks){
@@ -308,7 +309,7 @@ function redrawMap(){
spriteSize = 30;
mapctx.translate(markerX, markerY);
mapctx.rotate(marker.rotation);
mapctx.translate(-0.5*spriteSize, -0.5*spriteSize);
mapctx.translate(-0.5*spriteSize * MapData.view.pixelRatio, -0.5*spriteSize * MapData.view.pixelRatio);
mapctx.drawImage(
Utils.gradeArrows,
curSprite.x,
@@ -317,8 +318,8 @@ function redrawMap(){
curSprite.height,
0,
0,
spriteSize,
spriteSize
spriteSize * MapData.view.pixelRatio,
spriteSize * MapData.view.pixelRatio
);
mapctx.resetTransform();
curSprite = null;
@@ -332,7 +333,7 @@ function redrawMap(){
case 'service':
if(!(MapData.layers.services && MapData.layers.poi)) break;
marker.visible = true;
spriteSize = 30;
spriteSize = 30 * MapData.view.pixelRatio;
if(marker.serviceTypes.length == 0) marker.serviceTypes.push('');
if(marker.serviceTypes.length > 1){
mapctx.fillStyle = '#239a96';
@@ -355,8 +356,8 @@ function redrawMap(){
}
if(!marker.tooltipHitzone){
marker.tooltipHitzone = {
width: spriteSize * marker.serviceTypes.length,
height: spriteSize
width: spriteSize/MapData.view.pixelRatio * marker.serviceTypes.length,
height: spriteSize/MapData.view.pixelRatio
};
}
curSprite = null;
@@ -383,20 +384,20 @@ function redrawMap(){
mapctx.fillStyle = marker.color;
mapctx.strokeStyle = '#000';
mapctx.lineJoin = 'round';
mapctx.lineWidth = 20*MapData.view.scale;
mapctx.font = `bold ${400*MapData.view.scale}px "Noto Sans"`;
mapctx.lineWidth = 20*MapData.view.scale*MapData.view.pixelRatio;
mapctx.font = `bold ${400*MapData.view.scale*MapData.view.pixelRatio}px "Noto Sans"`;
textMeasure = mapctx.measureText(marker.shorthand);
mapctx.strokeText(marker.shorthand, markerX - textMeasure.width * 0.5, markerY);
mapctx.fillText(marker.shorthand, markerX - textMeasure.width * 0.5, markerY);
if(!marker.tooltipHitzone) marker.tooltipHitzone = {};
marker.tooltipHitzone.width = textMeasure.width;
marker.tooltipHitzone.height = textMeasure.actualBoundingBoxAscent;
marker.tooltipHitzone.width = textMeasure.width/MapData.view.pixelRatio;
marker.tooltipHitzone.height = textMeasure.actualBoundingBoxAscent/MapData.view.pixelRatio;
marker.tooltipHitzone.offsetY = marker.tooltipHitzone.height * 0.5;
if(MapData.view.scale < 0.14) break;
mapctx.font = `bold ${70*MapData.view.scale}px "Noto Sans"`;
mapctx.font = `bold ${70*MapData.view.scale*MapData.view.pixelRatio}px "Noto Sans"`;
textMeasure = mapctx.measureText(marker.nickname ?? marker.name);
mapctx.strokeText(marker.nickname ?? marker.name, markerX - textMeasure.width * 0.5, markerY+80*MapData.view.scale);
mapctx.fillText(marker.nickname ?? marker.name, markerX - textMeasure.width * 0.5, markerY+80*MapData.view.scale);
mapctx.strokeText(marker.nickname ?? marker.name, markerX - textMeasure.width * 0.5, markerY+80*MapData.view.scale*MapData.view.pixelRatio);
mapctx.fillText(marker.nickname ?? marker.name, markerX - textMeasure.width * 0.5, markerY+80*MapData.view.scale*MapData.view.pixelRatio);
break;
case 'yardSiding':
case 'yard':
@@ -405,21 +406,21 @@ function redrawMap(){
mapctx.fillStyle = '#fff';
mapctx.strokeStyle = '#000';
mapctx.lineJoin = 'round';
mapctx.lineWidth = 2;
mapctx.font = `14px "Noto Sans Mono"`;
mapctx.lineWidth = 2*MapData.view.pixelRatio;
mapctx.font = `${14*MapData.view.pixelRatio}px "Noto Sans Mono"`;
textMeasure = mapctx.measureText(marker.name);
tempMeasure.width = textMeasure.actualBoundingBoxLeft + textMeasure.actualBoundingBoxRight;
tempMeasure.height = textMeasure.fontBoundingBoxAscent + textMeasure.fontBoundingBoxDescent;
if(!marker.tooltipHitzone){
marker.tooltipHitzone = {
width: tempMeasure.width + 20,
height: tempMeasure.height + 8,
offsetY: -tempMeasure.height * 0.5 + 3,
width: (tempMeasure.width + 20)/MapData.view.pixelRatio,
height: (tempMeasure.height + 8)/MapData.view.pixelRatio,
offsetY: (-tempMeasure.height * 0.5 + 3)/MapData.view.pixelRatio,
};
}
mapctx.beginPath();
mapctx.moveTo(markerX, markerY);
mapctx.roundRect(markerX - 0.5*tempMeasure.width - 4, markerY - textMeasure.fontBoundingBoxDescent + 1, tempMeasure.width + 12, tempMeasure.height - 4, 3);
mapctx.roundRect(markerX - 0.5*tempMeasure.width - 4*MapData.view.pixelRatio, markerY - textMeasure.fontBoundingBoxDescent + 1*MapData.view.pixelRatio, tempMeasure.width + 12*MapData.view.pixelRatio, tempMeasure.height - 4*MapData.view.pixelRatio, 3*MapData.view.pixelRatio);
mapctx.fill();
mapctx.stroke();
mapctx.fillStyle = '#000';
@@ -438,7 +439,7 @@ function redrawMap(){
marker.tooltipHitzone.radius = marker.radius * MapData.view.scale;
mapctx.beginPath();
mapctx.moveTo(markerX, markerY);
mapctx.arc(markerX, markerY, marker.radius*MapData.view.scale, 0, Math.PI*2);
mapctx.arc(markerX, markerY, marker.radius*MapData.view.scale*MapData.view.pixelRatio, 0, Math.PI*2);
mapctx.fillStyle = '#894b35';
mapctx.globalAlpha = 0.65;
mapctx.fill();
@@ -458,10 +459,10 @@ function redrawMap(){
curSprite.y,
curSprite.width,
curSprite.height,
markerX-(0.5*spriteSize),
markerY-(0.5*spriteSize),
spriteSize,
spriteSize
markerX-(0.5*spriteSize)*MapData.view.pixelRatio,
markerY-(0.5*spriteSize)*MapData.view.pixelRatio,
spriteSize*MapData.view.pixelRatio,
spriteSize*MapData.view.pixelRatio
);
}
}
js/mapdata.js
+4 -3
View File
@@ -46,8 +46,9 @@ export let view = {
const mapContainer = document.getElementById('mapContainer');
let isLandscape = mapContainer.clientWidth > mapContainer.clientHeight;
view.scale = Math.min(mapContainer.clientWidth/(matrix.width + Config.defaultMapPadding*2), mapContainer.clientHeight/(matrix.height + Config.defaultMapPadding*2));
view.pixelRatio = window.devicePixelRatio;
if(isLandscape){
view.x = mapContainer.clientWidth*0.6 - (matrix.width * 0.5 + matrix.minX)*view.scale;
view.x = (mapContainer.clientWidth*0.6 - (matrix.width * 0.5 + matrix.minX)*view.scale);
view.y = (matrix.minY - Config.defaultMapPadding) * view.scale;
}else{
view.x = -(matrix.minX - Config.defaultMapPadding) * view.scale;
@@ -56,10 +57,10 @@ export let view = {
view.dirty = false;
view.convertX = x => {
return x * view.scale + view.x;
return x * view.scale * view.pixelRatio + view.x * view.pixelRatio;
}
view.convertY = y => {
return (matrix.minY+matrix.maxY-y) * view.scale - view.y;
return (matrix.minY+matrix.maxY-y) * view.scale * view.pixelRatio - view.y * view.pixelRatio;
}
view.unconvertX = x => {
js/utillib.js
+1 -1
View File
@@ -16,7 +16,7 @@ export const gradeIncrements = [
0.001
];
const gradeArrowDimensions = 64;
const gradeArrowDimensions = 64 * window.devicePixelRatio;
export const gradeArrows = new OffscreenCanvas(11*gradeArrowDimensions, 2*gradeArrowDimensions);
export function generateGradeArrows(){