MarkupCore技术问询：如何将图纸的平移与缩放设置批量应用至多个标记

嘿，这个场景我太熟悉了——把旧图纸的标记迁移到尺寸变化的新版本，最头疼的就是坐标偏移问题。其实核心思路就是把用户调整好的视图变换反向映射到标记坐标上，让标记跟着图纸的显示状态同步校准。下面一步步给你拆解：

首先得明确，几乎所有图纸查看器（包括MarkupCore关联的实现）都会维护当前视图的核心变换参数，一般包含：

• 缩放比例（scale）：当前视图相对于v2原始尺寸的缩放倍数
• 平移偏移（offsetX, offsetY）：视图在容器中的水平/垂直偏移量

怎么提取这些参数？要看你的具体实现：

• 如果是基于Canvas/SVG的渲染，通常可以从视图的变换矩阵里解析，比如调用视图对象的getViewTransform()方法拿到变换矩阵，再拆解出缩放和平移：

// 假设你的图纸视图实例是viewer
const transform = viewer.getViewTransform();
// 多数情况下X/Y缩放比例一致，除非有拉伸场景
const scale = transform.scaleX;
const offsetX = transform.translateX;
const offsetY = transform.translateY;

• 如果查看器提供了直接获取参数的API（比如getScale()、getPanOffset()），直接调用会更省心。

标记的原始坐标是基于v1图纸的，所以要分两步完成校准：先把v1坐标映射到v2的原始尺寸坐标系，再结合用户的视图变换做反向修正。

1. 先计算v1到v2的尺寸比例 #

这一步是为了让标记先适配v2的原始大小：

// 替换成你实际的v1、v2原始尺寸
const v1OriginalWidth = 800;
const v1OriginalHeight = 600;
const v2OriginalWidth = 1200;
const v2OriginalHeight = 900;

// 计算两个版本的宽高比例
const scaleV1ToV2_W = v2OriginalWidth / v1OriginalWidth;
const scaleV1ToV2_H = v2OriginalHeight / v1OriginalHeight;

2. 把v1标记坐标转成v2原始坐标系下的坐标 #

// 假设某标记在v1中的坐标是markV1_X、markV1_Y
const markV2Original_X = markV1_X * scaleV1ToV2_W;
const markV2Original_Y = markV1_Y * scaleV1ToV2_H;

3. 应用视图的逆变换，得到标记的最终显示坐标 #

用户调整视图时，是把v2图纸做了缩放和平移，所以标记要做逆变换才能匹配当前视图的显示位置：

// 逆变换逻辑：先抵消平移，再抵消缩放（注意坐标系原点，若视图原点是中心可能要调整符号）
const finalMark_X = (markV2Original_X / scale) - (offsetX / scale);
const finalMark_Y = (markV2Original_Y / scale) - (offsetY / scale);

如果你的视图用了复合变换（比如先旋转再缩放平移），更稳妥的方式是直接用矩阵逆变换：

// 从视图获取变换矩阵字符串，转成DOMMatrix
const viewMatrix = new DOMMatrix(viewer.getTransformString());
// 生成逆矩阵
const inverseMatrix = viewMatrix.invert();
// 用逆矩阵转换坐标
const transformedPoint = inverseMatrix.transformPoint(new DOMPoint(markV2Original_X, markV2Original_Y));
const finalMark_X = transformedPoint.x;
const finalMark_Y = transformedPoint.y;

拿到每个标记的最终坐标后，遍历所有从v1复制来的标记，更新它们的位置属性即可。如果标记有尺寸（比如矩形、箭头），还要同步缩放尺寸：

// 假设marks是从v1复制过来的标记数组
marks.forEach(mark => {
  // 按上面的步骤计算当前标记的finalMark_X、finalMark_Y
  // 更新标记位置（根据MarkupCore的API调整，比如setPosition或直接修改属性）
  mark.setPosition(finalMark_X, finalMark_Y);
  
  // 同步更新标记尺寸（如果有）
  mark.width = mark.originalWidth * scaleV1ToV2_W / scale;
  mark.height = mark.originalHeight * scaleV1ToV2_H / scale;
});

• 锚点一致性：有些标记的位置是基于左上角，有些是中心，要确保坐标转换时锚点规则和标记自身的锚点匹配，否则会出现偏移。
• 测试验证：先拿1-2个标记做测试，调整参数直到位置完全匹配，再批量处理所有标记，避免翻车。
• 变换顺序：如果视图的变换顺序是“先平移再缩放”还是“先缩放再平移”，会影响逆变换的计算逻辑，要和实际视图的变换顺序对应。

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