forge Viewer - 我们如何为 svg 标记添加 CAMERA_CHANGE_EVENT？

Posted 2023-03-16

【中文标题】forge Viewer - 我们如何为 svg 标记添加 CAMERA_CHANGE_EVENT？

【英文标题】：forge Viewer - How can we add CAMERA_CHANGE_EVENT for svg markups?

【发布时间】：2020-06-12 21:35:39

【问题描述】：

我们如何为在查看器上绘制的标记添加侦听器 CMERA_CHANGE_EVENT？如果我们针对 dbid 创建一个标签，我们可以存储它的坐标并可以将 worldToClient 应用于坐标以获取新坐标。但这对 svg 标记有何作用？

在我的应用程序中，用户可以通过两种方式关联 rfi 信息。 1. 通过简单地单击模型对象/dbid，我将让用户通过文本框添加一些文本信息，并将其作为标签与所选对象/dbid 一起附加。 当相机旋转事件时，标签会随着所选对象一起移动。

从技术上讲，为了完成这项工作，我使用函数 getObjPosition 来获取 dbid 的坐标并将其存储在标签控件中，我在相机更改事件期间提取这些值并使用以下函数 getClientCoordinates 更新当前客户端坐标

function getObjPosition(dbId) 
    const model = viewer.model;
    const instanceTree = model.getData().instanceTree;
    const fragList = model.getFragmentList();

    let bounds = new THREE.Box3();

    instanceTree.enumNodeFragments( dbId, ( fragId ) => 
        let box = new THREE.Box3();
        fragList.getWorldBounds( fragId, box );
        bounds.union( box );
    , true );

    const position = bounds.center();
    return position;


function getClientCoordinates(positionCoordinates)
    var screenpoint = viewer.worldToClient(
                    new THREE.Vector3(positionCoordinates.x,
                                      positionCoordinates.y,
                                      positionCoordinates.z,));
    return screenpoint

在这个场景中，我让用户绘制云标记并为用户在选择标记时输入的 tetual 信息关联一个标签。 所以要使用下面的代码获取坐标 var pos = markup.markups[0].getClientPosition(); 并用这个创建的标记标记标签。有用。 对于相机更改事件，标记本身会丢失其位置，因此不确定我将如何附加到模型并为标签应用坐标。 另一个令人担忧的部分是，我应该如何在相机更改事件期间获取模型上的所有绘制标记

希望我的问题现在清楚了。

【参考方案1】：

CAMERA_CHANGE_EVENT 适用于整个场景，并且无论何时发生导航，因此无法将其绑定到任何特定对象，这样做也没有什么意义。

如果您尝试将 SVG 标记移动到导航后的新对应坐标，只需在导航前存储其原始世界位置（使用 clientToWorld），然后使用 worldToClient 获取导航后的新坐标。

【讨论】：

不，我不想移动 svg。在这里，如果我通过单击和拖动来移动绘图，svg 标记将失去焦点并远离模型的原始位置

...这正是您需要相应地移动它们以匹配模型和场景后导航的平移（移动）的原因...

想知道 svgMarkupScore 不自动支持这一点

如何访问 CAMERA_CHANGE_EVENT 事件的标记？

您如何找到标记和应用职位？像标签一样，您可以像 var $eles = $("label[id^='mymk']"); var DOMeles = $eles.get(); for(DOMeles 中的var index) //在这里应用逻辑