CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tilemap-editor): 修复画布高DPI屏幕分辨率适配问题

Browse Source
This commit is contained in:
yhh
2025-12-03 17:29:57 +08:00
parent 373bdd5d2b
commit 2311419e71
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/tilemap-editor/src/components/TilemapCanvas.tsx
View File

@@ -81,11 +81,14 @@ export const TilemapCanvas: React.FC<TilemapCanvasProps> = ({
const ctx = canvas.getContext('2d');
if (!ctx) return;
const dpr = window.devicePixelRatio || 1;
// Clear
ctx.fillStyle = '#2d2d2d';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.scale(dpr, dpr);
ctx.translate(panX, panY);
ctx.scale(zoom, zoom);
@@ -214,11 +217,16 @@ export const TilemapCanvas: React.FC<TilemapCanvasProps> = ({
cancelAnimationFrame(rafId);
}
rafId = requestAnimationFrame(() => {
const dpr = window.devicePixelRatio || 1;
const newWidth = container.clientWidth;
const newHeight = container.clientHeight;
if (canvas.width !== newWidth || canvas.height !== newHeight) {
canvas.width = newWidth;
canvas.height = newHeight;
const scaledWidth = Math.floor(newWidth * dpr);
const scaledHeight = Math.floor(newHeight * dpr);
if (canvas.width !== scaledWidth || canvas.height !== scaledHeight) {
canvas.width = scaledWidth;
canvas.height = scaledHeight;
canvas.style.width = `${newWidth}px`;
canvas.style.height = `${newHeight}px`;
draw();
}
rafId = null;