本文详解 Konva.js 响应式画布的正确实现方式：通过统一缩放比例（scaleX === scaleY）和舞台定位（stage.position），确保图形在浏览器缩放时保持宽高比不变、位置合理、无拉伸变形。
本文详解 konva.js 响应式画布的正确实现方式：通过统一缩放比例（`scalex === scaley`）和舞台定位（`stage.position`），确保图形在浏览器缩放时保持宽高比不变、位置合理、无拉伸变形。
在使用 Konva.js 构建响应式游戏或可视化应用时，一个常见误区是直接按容器宽高分别缩放（即 scaleX = widthRatio, scaleY = heightRatio），这会导致圆形变椭圆、正方形变矩形等严重失真问题。根本原因在于：Konva 的 scale() 是对整个舞台的变换操作，若 X/Y 缩放不一致，即构成非均匀缩放（anisotropic scaling），破坏原始几何比例。
正确的解决方案是采用 等比缩放（uniform scaling） —— 即取 containerWidth / sceneWidth 与 containerHeight / sceneHeight 中的较小值作为全局缩放因子 scale，从而保证内容完整可见且不失真。同时，需将缩放后的舞台居中放置于容器内，这通过 stage.position({x, y}) 实现，其中偏移量由 (containerSize - scaledSceneSize) / 2 计算得出。
以下是优化后的核心逻辑：
function fitStageIntoParentContainer() {
const container = document.querySelector('#stage-parent');
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;
// ✅ 关键：统一缩放因子，取最小比例以保证内容完全可见
const scale = Math.min(
containerWidth / sceneWidth,
containerHeight / sceneHeight
);
const newWidth = sceneWidth * scale;
const newHeight = sceneHeight * scale;
// ✅ 关键：计算居中偏移，使缩放后舞台在容器中居中显示
const x = (containerWidth - newWidth) / 2;
const y = (containerHeight - newHeight) / 2;
// 设置舞台尺寸为容器大小（物理像素）
stage.width(containerWidth);
stage.height(containerHeight);
// 应用统一缩放
stage.scale({ x: scale, y: scale });
// 调整舞台位置，补偿缩放导致的视觉偏移
stage.position({ x, y });
// ⚠️ 必须调用 batchDraw() 触发重绘
stage.batchDraw();
}
// 首次初始化 + 监听窗口缩放
fitStageIntoParentContainer();
window.addEventListener('resize', fitStageIntoParentContainer);此外，注意形状坐标应基于逻辑场景尺寸（如 sceneWidth = 1000）定义，而非依赖 stage.width()/height() 动态计算（原代码中 x: stage.width() / 2 是错误的，因 stage.width() 在缩放后已变为容器像素宽，与逻辑坐标系脱节）。例如：
// ✅ 正确：使用固定逻辑坐标（与 sceneWidth/Height 对齐） circle.x(sceneWidth / 2).y(sceneHeight / 2); // ❌ 错误：混用物理像素与逻辑坐标 // circle.x(stage.width() / 2); // stage.width() 是缩放后的容器宽，非逻辑宽
最后，CSS 层面需确保容器无干扰边距、滚动或盒模型偏差：
body {
margin: 0; padding: 0;
overflow: hidden;
height: 100vh;
}
#stage-parent {
width: 100%; height: 100vh;
}总结：Konva 响应式的核心 = 统一缩放 + 逻辑坐标系 + 精确居中定位 + 主动重绘。只要遵循这一模式，即可在任意屏幕尺寸下稳定呈现比例准确、布局可控的交互式画布。
