Konva舞台重构后在Safari与Chrome中Y轴位置不一致问题求助

问题背景 #

基于Konva构建的WordPress画布编辑器，通过exportJSON()保存舞台数据，加载时遍历JSON重建节点（结构为Stage -> Layer -> Group(Transformer+Text/Image)），Text节点在Chrome和Safari中渲染差异不明显，但打印时Y轴偏移1-2cm。

核心原因 #

• 浏览器字体渲染引擎差异：Chrome（Blink）与Safari（WebKit）对字体基线、行高的计算逻辑存在细微差别，打印时被放大为明显偏移。
• Konva导出JSON时缺失字体度量信息：exportJSON()未保存Text节点的实际渲染偏移量，加载时重新计算位置出现偏差。
• 字体加载时机滞后：画布渲染时目标字体未加载完成，使用 fallback 字体渲染后替换，导致位置偏移。

解决步骤 #

1. 强制统一Text节点对齐基准 #

将Text节点的垂直对齐方式从默认的基线对齐改为顶部对齐，消除浏览器基线计算差异：

// 加载Text节点时显式设置
const shape = new Konva[node.className]({
  ...node.attrs,
  verticalAlign: 'top' // 强制顶部对齐，避免基线偏移
});

// 导出前统一配置所有Text节点，确保JSON包含该属性
stage.find('Text').forEach(text => {
  text.setAttr('verticalAlign', 'top');
});
const json = stage.toJSON();

2. 确保导出/加载时字体属性完整 #

检查导出的JSON中Text节点是否包含fontFamily、fontSize、lineHeight等核心属性，加载时强制补充默认值：

const shape = new Konva[node.className]({
  ...node.attrs,
  fontFamily: node.attrs.fontFamily || 'Arial',
  fontSize: node.attrs.fontSize || 16,
  lineHeight: node.attrs.lineHeight || 1.2
});

3. 等待字体加载完成后渲染画布 #

利用原生API确保目标字体加载完成后再初始化画布，避免 fallback 字体导致的偏移：

// 等待页面所有字体加载完成
document.fonts.ready.then(() => {
  // 执行画布加载逻辑
  loadCanvasFromJSON(savedJSON);
});

// 自定义字体需在CSS中正确配置
/*
@font-face {
  font-family: 'YourCustomFont';
  src: url('your-font.woff2') format('woff2');
  font-display: block; // 避免字体闪烁与偏移
}
*/

4. 匹配设备像素比提升渲染精度 #

初始化Stage时设置pixelRatio，确保高DPI屏幕与打印时的渲染精度一致：

const stage = new Konva.Stage({
  container: 'container',
  width: 800,
  height: 600,
  pixelRatio: window.devicePixelRatio
});

5. 排除Transformer干扰 #

临时移除加载时的Transformer创建逻辑，验证偏移是否消失，排除Transformer对Group内节点位置的间接影响：

// 临时注释Transformer相关代码测试
// const transformer = new Konva.Transformer({id: 'transformer-' + shape.id(), ...DEFAULT_TRANSFORMER_ATTRS})
// transformer.nodes([shape])
// newGroup.add(transformer)

验证方法 #

• 加载完成后打印Text节点的y属性与getClientRect()返回值，对比Chrome/Safari的数值差异，定位是属性问题还是渲染偏移。
• 使用stage.toDataURL()生成画布图片，对比两款浏览器导出的图片，确认是渲染问题还是打印阶段的浏览器处理差异。

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