KonvaJS：解决页面缩放后画布模糊的技术求助

核心问题分析 #

直接修改Konva.pixelRatio后调用stage.draw()无法消除模糊，根源在于Konva舞台的初始尺寸基于CSS像素设置，页面缩放后，舞台的物理像素尺寸未同步更新，导致渲染像素密度与当前设备缩放比例不匹配。而stage.toDataURL({ pixelRatio: window.devicePixelRatio })能生成清晰图，说明只要让舞台渲染的像素密度和当前设备缩放比例对齐，就能解决模糊问题。

具体解决方案 #

需要在页面缩放（或窗口 resize）时，同步更新舞台的物理像素尺寸和像素比，步骤如下：

• 监听页面缩放/resize事件，实时获取当前设备像素比与容器实际尺寸
• 计算容器的物理像素宽高（CSS像素尺寸 × 设备像素比）
• 更新舞台尺寸为物理像素值，同时保持容器的CSS尺寸不变
• 设置舞台实例的pixelRatio为当前设备像素比，最后重新绘制舞台

代码示例 #

// 初始化舞台
const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
  pixelRatio: window.devicePixelRatio
});

const layer = new Konva.Layer();
stage.add(layer);

// 添加文本和圆形元素
const text = new Konva.Text({
  x: 50,
  y: 50,
  text: '测试文本',
  fontSize: 30,
  fill: 'black'
});
layer.add(text);

const circle = new Konva.Circle({
  x: 200,
  y: 100,
  radius: 50,
  fill: 'red'
});
layer.add(circle);
layer.draw();

// 处理缩放/resize的逻辑函数
function handleZoom() {
  const pixelRatio = window.devicePixelRatio;
  const container = stage.container();
  const rect = container.getBoundingClientRect();
  
  // 计算容器对应的物理像素尺寸
  const physicalWidth = rect.width * pixelRatio;
  const physicalHeight = rect.height * pixelRatio;
  
  // 更新舞台的物理像素尺寸
  stage.size({ width: physicalWidth, height: physicalHeight });
  // 保持容器的CSS视觉尺寸不变
  container.style.width = `${rect.width}px`;
  container.style.height = `${rect.height}px`;
  // 设置舞台实例的像素比
  stage.pixelRatio(pixelRatio);
  // 重新绘制舞台
  stage.draw();
}

// 监听resize事件（浏览器缩放会触发该事件）
window.addEventListener('resize', handleZoom);

// 保留原有的圆形变色动画，验证功能兼容性
setInterval(() => {
  circle.fill(Konva.Util.getRandomColor());
  layer.draw();
}, 1000);

关键注意点 #

• 不要修改全局Konva.pixelRatio，需针对舞台实例设置stage.pixelRatio(ratio)
• 舞台的size必须设置为物理像素值，同时容器的CSS尺寸保持原CSS像素值，才能保证视觉大小不变的同时渲染清晰
• 监听resize事件即可覆盖页面缩放场景，因为浏览器缩放操作会触发resize事件

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