基于ngx-extended-pdf-viewer与Konva Groups的KonvaJS输入框尺寸问题

问题描述 #

我正在开发一款基于Angular、KonvaJS和ngx-extended-pdf-viewer库的电子文档签署Web应用。文档制作人员可添加由包含rectangles和text的Konva groups组成的输入字段，供签署人填写。

目前遇到的核心问题：

• 输入框尺寸已通过后端正确保存至MongoDB，两端展示时输入框位置完全正确
• 调整输入框尺寸后，制作端显示正常，但签署端的输入框尺寸显示异常
• 仅移动输入框不修改尺寸时，签署端显示完全正常

补充背景信息 #

• 制作与签署视图仅通过背景色区分，核心展示逻辑完全一致
• 使用ngx-extended-pdf-viewer展示PDF，通过<div>创建专用容器承载Konva图层，该容器在两端的尺寸完全相同
• 两端使用完全相同的代码渲染Konva groups
• 已尝试复用制作端的Konva图层缩放值，问题仍未解决

解决方案建议 #

1. 统一坐标与尺寸的基准单位 #

检查制作端调整尺寸时的计算逻辑：

• 避免直接使用容器的DOM屏幕像素作为尺寸保存，因为ngx-extended-pdf-viewer会根据视图缩放PDF，两端的PDF缩放比例可能存在差异。
• 建议将输入框的尺寸和位置都基于PDF文档的原始坐标系统（比如以PDF的点为单位）保存，渲染时根据当前PDF的实时缩放比例转换为Konva的绘制单位。

2. 同步两端Konva Stage的核心参数 #

即使容器尺寸相同，Konva Stage的缩放、偏移参数可能因PDF加载时机不同出现差异：

• 监听ngx-extended-pdf-viewer的zoomChanged或pageRendered事件，获取当前PDF的缩放比例，以此初始化Konva Stage：

  // 示例：根据PDF缩放比例设置Konva Stage
  const pdfScale = this.pdfViewerService.getCurrentZoom();
  this.stage.scale({ x: pdfScale, y: pdfScale });
  this.stage.draw();
  

• 确保两端Stage的scaleX/scaleY、offsetX/offsetY完全一致后，再渲染Konva groups。

3. 修正尺寸的保存与渲染逻辑 #

• 制作端调整尺寸时，确保保存的是输入框的原始尺寸值，而非经过Konva Stage缩放后的数值。如果保存的是缩放后的尺寸，签署端Stage再次缩放时会导致尺寸叠加异常。
• 渲染时直接使用数据库中存储的原始尺寸，结合当前Stage的缩放比例计算最终绘制尺寸，而非直接赋值。

4. 验证数据库存储的尺寸数据 #

再次确认MongoDB中存储的width/height数值：

• 调整尺寸后，检查数据库中的数据是否与制作端调整后的实际原始尺寸完全一致，排除数据被意外转换、截断或精度丢失的可能。

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