在 Autodesk 查看器顶部绘制 svg 形状,当上传同一绘图的新版本时,查看器的中心坐标会移动
Drawing svg shapes on top of autodesk viewer, viewer's center coordinate moves when new versions of the same drawing are uploaded
我们有一个 Web 应用程序,让用户可以在 Autodesk 查看器上绘制 SVG 形状。我们可以使用 worldToClient 和 clientToWorld 函数将屏幕上的坐标转换为绘图,效果非常好,形状随绘图缩放和移动。
我们还让用户通过上传新版本来更新图纸,这就变成了一个问题,即当图纸发生变化时,中心坐标(0,0)也会发生变化。这意味着 SVG 形状在与新版本的绘图一起使用时会有错误的位置。在我看来,在翻译的某个地方,忽略了 .dwg 文件的原始位置,并根据内容计算了一个新的中心坐标。
我们目前的解决方法是让用户在他们希望以这种方式使用的绘图周围绘制一个方形框。如果所有更改都发生在该方块内,则中心将不会随新版本移动。
有没有人对如何在用户不需要编辑图纸的情况下解决这个问题有任何想法、想法或经验?
在二维绘图中使用 viewer.clientToWorld
和 viewer.worldToClient
时,“世界”通常表示页面尺寸。在您的情况下,您提供的两个 DXF 文件具有相同的页面尺寸,并且每个 DXF 文件中的内容都缩放以适合整个页面。这就是两个 DXF 文件之间的“世界”坐标不匹配的原因。
幸运的是,在转换 DXF 文件时,Forge 模型衍生服务还导出“源到逻辑”转换,我相信它定义了从 原始 坐标到 页坐标。当您计算该变换的逆时,您应该能够从 page 坐标转换回 source 坐标,这些就是您应该与您的标记一起存储。转换成 source 坐标可能看起来像这样:
const res = viewer.clientToWorld(ev.clientX, ev.clientY);
if (res && res.point) {
console.log('page coords', res.point);
const sourceToLogicalXform = viewer.model.getData().metadata?.page_dimensions?.source_to_logical_xform;
if (sourceToLogicalXform) {
const sourceToLogical = new THREE.Matrix4().fromArray(sourceToLogicalXform).transpose();
const logicalToSource = new THREE.Matrix4().getInverse(sourceToLogical);
console.log('source coords', res.point.clone().applyMatrix4(logicalToSource));
}
}
我们有一个 Web 应用程序,让用户可以在 Autodesk 查看器上绘制 SVG 形状。我们可以使用 worldToClient 和 clientToWorld 函数将屏幕上的坐标转换为绘图,效果非常好,形状随绘图缩放和移动。
我们还让用户通过上传新版本来更新图纸,这就变成了一个问题,即当图纸发生变化时,中心坐标(0,0)也会发生变化。这意味着 SVG 形状在与新版本的绘图一起使用时会有错误的位置。在我看来,在翻译的某个地方,忽略了 .dwg 文件的原始位置,并根据内容计算了一个新的中心坐标。
我们目前的解决方法是让用户在他们希望以这种方式使用的绘图周围绘制一个方形框。如果所有更改都发生在该方块内,则中心将不会随新版本移动。
有没有人对如何在用户不需要编辑图纸的情况下解决这个问题有任何想法、想法或经验?
在二维绘图中使用 viewer.clientToWorld
和 viewer.worldToClient
时,“世界”通常表示页面尺寸。在您的情况下,您提供的两个 DXF 文件具有相同的页面尺寸,并且每个 DXF 文件中的内容都缩放以适合整个页面。这就是两个 DXF 文件之间的“世界”坐标不匹配的原因。
幸运的是,在转换 DXF 文件时,Forge 模型衍生服务还导出“源到逻辑”转换,我相信它定义了从 原始 坐标到 页坐标。当您计算该变换的逆时,您应该能够从 page 坐标转换回 source 坐标,这些就是您应该与您的标记一起存储。转换成 source 坐标可能看起来像这样:
const res = viewer.clientToWorld(ev.clientX, ev.clientY);
if (res && res.point) {
console.log('page coords', res.point);
const sourceToLogicalXform = viewer.model.getData().metadata?.page_dimensions?.source_to_logical_xform;
if (sourceToLogicalXform) {
const sourceToLogical = new THREE.Matrix4().fromArray(sourceToLogicalXform).transpose();
const logicalToSource = new THREE.Matrix4().getInverse(sourceToLogical);
console.log('source coords', res.point.clone().applyMatrix4(logicalToSource));
}
}