本文详解如何使用 konva.js 实现宽高自适应的 canvas，通过统一缩放因子与舞台定位，彻底解决窗口缩放时图形拉伸、变形的问题。
本文详解如何使用 konva.js 实现宽高自适应的 canvas，通过统一缩放因子与舞台定位，彻底解决窗口缩放时图形拉伸、变形的问题。
在 Konva.js 中实现响应式 Canvas 的核心挑战，并非简单地调整 <canvas></canvas> 元素尺寸，而是确保逻辑坐标系（scene）与视口（viewport）之间的映射关系始终保持一致且无畸变。原始代码中分别计算 scaleX 和 scaleY，导致长宽缩放不一致，圆形变椭圆、矩形变平行四边形——这正是“形状失真”的根本原因。
✅ 正确解法是：强制使用单一缩放因子（uniform scaling），并配合舞台平移（stage.position()），使整个虚拟画布（如 1000×1000）始终完整、居中、等比地渲染在容器内。
关键改进点解析
-
统一缩放因子
使用Math.min(containerWidth / sceneWidth, containerHeight / sceneHeight)确保缩放后内容完全可见（即“内切”模式），避免裁剪或留白不均：const scale = Math.min(containerWidth / sceneWidth, containerHeight / sceneHeight);
固定逻辑坐标，动态更新舞台
所有图形（Circle、Rect 等）的x/y/width/height均基于原始场景尺寸（如sceneWidth = 1000）定义，不再依赖stage.width()或stage.height()动态计算。这样可保证逻辑布局稳定，缩放仅作用于渲染层。-
舞台尺寸设为容器大小，再用
scale + position控制内容呈现stage.width(containerWidth); // 视口宽度 stage.height(containerHeight); // 视口高度 stage.scale({ x: scale, y: scale }); // 等比缩放 stage.position({ x: (containerWidth - sceneWidth * scale) / 2, y: (containerHeight - sceneHeight * scale) / 2 }); // 居中偏移此设计让 Konva 内部仍以
1000×1000为坐标基准，仅通过变换矩阵完成适配，完全规避坐标重算。 务必调用
stage.batchDraw()
缩放与定位变更后必须显式重绘，否则视觉更新会延迟或失效。
完整可运行示例（精简版）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Konva Responsive Canvas (Uniform Scale)</title>
<style>
body { margin: 0; padding: 0; overflow: hidden; background: #f0f0f0; height: 100vh; }
#stage-parent { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="stage-parent">
<div id="container"></div>
</div>
<script src="https://unpkg.com/konva@9/konva.min.js"></script>
<script>
const sceneWidth = 1000;
const sceneHeight = 1000;
const stage = new Konva.Stage({
container: 'container',
width: sceneWidth,
height: sceneHeight
});
const layer = new Konva.Layer();
stage.add(layer);
// 所有图形使用固定逻辑坐标（基于 1000×1000 场景）
const circle = new Konva.Circle({
x: sceneWidth / 2,
y: sceneHeight / 2,
radius: 50,
fill: 'red'
});
layer.add(circle);
const rect = new Konva.Rect({
x: sceneWidth - 100,
y: sceneHeight - 100,
width: 100,
height: 100,
fill: 'green'
});
layer.add(rect);
function fitStageIntoParent() {
const parent = document.getElementById('stage-parent');
const w = parent.offsetWidth;
const h = parent.offsetHeight;
const scale = Math.min(w / sceneWidth, h / sceneHeight);
const scaledW = sceneWidth * scale;
const scaledH = sceneHeight * scale;
// 设置舞台为容器尺寸，再通过 scale + position 映射内容
stage.width(w).height(h);
stage.scale({ x: scale, y: scale });
stage.position({
x: (w - scaledW) / 2,
y: (h - scaledH) / 2
});
stage.batchDraw(); // 关键：触发重绘
}
fitStageIntoParent();
window.addEventListener('resize', fitStageIntoParent);
</script>
</body>
</html>注意事项与进阶提示
- ✅ 推荐使用
Math.min（内切）：适合游戏、图表等要求内容完整可见的场景；若需填满容器（允许裁剪），则改用Math.max（外切），但需额外处理边界逻辑。 - ⚠️ 避免在
resize中频繁重设stage.width/height为逻辑尺寸：这会导致 Konva 重新计算内部 canvas 缓冲区，引发性能抖动及坐标错乱。 - ? 如需支持 DPR（设备像素比）高清渲染：可在
fitStageIntoParent中乘以window.devicePixelRatio并设置stage.setPixelRatio()，但需同步调整canvas的style.width/height。 - ? 复杂布局建议封装为工具函数：例如
ResponsiveStage(sceneSize, containerSelector)，便于多实例复用。
掌握这一模式后，你不仅能解决 Konva 的响应式问题，更能深入理解 Canvas 渲染中「逻辑坐标系」与「设备坐标系」分离的设计哲学——这是构建高性能、可维护可视化应用的关键基础。
