如何使用CSS调整Konvajs场景尺寸实现等比响应式显示

Konva 的 Stage 本身就区分内部逻辑坐标系尺寸和实际DOM渲染尺寸，和原生 Canvas 用属性设内部分辨率、用CSS设显示尺寸的逻辑完全对应，按以下方式配置即可实现和原生示例完全一致的效果：

实现步骤 #

• 初始化 Stage 时固定逻辑尺寸为 500x500：这一步对应原生 Canvas 的width/height属性设置，所有图形绘制、编辑操作的坐标计算都会基于这个固定的500*500坐标系，不会随显示尺寸变化出现坐标偏移。
• 给 Konva 生成的 Canvas 元素设置CSS尺寸：将所有Canvas（包括主绘制层、事件检测层）的CSS宽高设为父元素的50%，对应原生Canvas的style设置，保证不同屏幕下显示尺寸始终为父元素的一半，且因为逻辑尺寸固定1:1宽高比，不会出现拉伸变形。

完整代码示例 #

<!-- 业务父容器，可根据自身需求调整父容器定位、尺寸规则 -->
<div style="width: 100%; height: 800px; position: relative;">
  <div id="editor-stage"></div>
</div>

<script>
// 初始化Stage，固定逻辑尺寸500x500
const stage = new Konva.Stage({
  container: 'editor-stage',
  width: 500,
  height: 500
});

// 给所有Konva生成的canvas设置百分比显示尺寸
const allCanvases = stage.container().querySelectorAll('canvas');
allCanvases.forEach(canvas => {
  canvas.style.width = '50%';
  canvas.style.height = '50%';
});

// 后续正常添加层、图形即可，所有坐标、编辑逻辑都基于500*500的固定坐标系
const layer = new Konva.Layer();
stage.add(layer);
</script>

注意事项 #

• 该方案下Konva会自动校准事件坐标，拖拽、缩放、图片编辑等交互拿到的坐标值都是对应500*500逻辑坐标系的数值，不需要额外做坐标转换。
• 如果父容器尺寸会动态变化（比如窗口缩放、布局调整），不需要修改Stage的逻辑尺寸，Canvas的百分比样式会自动适配显示大小，无需额外绑定resize事件重设Stage尺寸。
• 因为逻辑尺寸始终固定为1:1的500x500，显示时不会出现图形拉伸、比例失调的问题，和你提供的原生Canvas实现效果完全一致。

内容的提问来源于stack exchange，提问作者gnd20032