自订义 Forge Viewer ModelStructurePanel 的交互行为

xialong 发布于2019-08-22 13:55 / 2787人阅读

摘要：在官方释出版的同时发布了新版本的，这个面版已被整个重新改写，这次更新也加入一些新的交互行为，下面我们将会稍作解释。

这礼拜的小技巧是关于如何以不加入太多的 JavaScript 的方式自订义 ModelStructurePanel 的交互行为，这个小技巧受到这篇问与答的启发：Prevent zoom in Forge viewer when clicking in Model Browser。

在官方释出 3.2.1 版 Viewer 的同时发布了新版本的 ModelStructurePanel，这个面版已被整个重新改写，这次更新也加入一些新的交互行为，下面我们将会稍作解释。那回到主题，如果想要自定义用户点击面板上节点时的行为时要怎么做呢？

但在开始自定这些交户行为前，我们先来看看 Autodesk.Viewing.Extensions.ViewerModelStructurePanel 在 Viewer3D.js 里是如何被实作的。首先看 onClick 的部份，我们可以看到这个方法会去检查辅助按键 [Ctrl, Shift, Alt] 并将其加到事件里头，所以我们可以通过组合点击（click）和这些辅助按键的方式来实作、处理不同的交互行为。

ViewerModelStructurePanel.prototype.onClick = function (node, event) {

  if (this.isMac && event.ctrlKey) {
    return;
  }

  var that = this;

  var key = "click";

  if (that.ctrlDown(event)) {
    key += "Ctrl";
  }

  if (event.shiftKey) {
    key += "Shift";
  }

  if (event.altKey) {
    key += "Alt";
  }

  if (this.clickConfig && this.clickConfig[key]) {

    that.handleAction(this.clickConfig[key]["onObject"], node);

  } else {

    this.viewer.select(node);
  }
};

同时，如果上头代码里的 key 与 clickConfig 有匹配，这个方法会去调用 handleAction 这个函数；而这个 clickConfig 就是用来订义 ModelStructurePanel 点击交互行为的设置对象，它会在面板初始化时被带入。

var kDefaultDocStructureConfig = {
  "click": {
    "onObject": ["toggleLeavesSelection"]
  },
  "clickShift": {
    "onObject": ["toggleMultipleLeavesSelection"]
  },
  "clickCtrl": {
    "onObject": ["toggleMultipleLeavesSelection"]
  }
};

function ViewerModelStructurePanel(viewer, title, options) {

  // ... skipping stuff for clarity ...

  this.clickConfig = (options && options.docStructureConfig) 
      ? options.docStructureConfig 
      : kDefaultDocStructureConfig;

这边是 ` 这个函数的实作，我们可以从这边看到 ModelStructurePanel` 有哪些默认的交互行为：

ViewerModelStructurePanel.prototype.handleAction = function (actionArray, dbId) {

  for (var action in actionArray) {
    switch (actionArray[action]) {
      case "toggleLeavesSelection":
        toggleLeavesSelection(this, dbId);
        break;
      case "toggleMultipleLeavesSelection":
        toggleMultipleLeavesSelection(this, dbId);
        break;
      case "selectOnly":
        this.ignoreNextSelectionChange = true;
        this.viewer.select(dbId);
        break;
      case "deselectAll":
        this.ignoreNextSelectionChange = true;
        this.viewer.select([]);
        break;
      case "selectToggle":
        this.ignoreNextSelectionChange = true;
        this.viewer.toggleSelect(dbId);
        break;
      case "isolate":
        this.viewer.isolate(dbId);
        break;
      case "showAll":
        this.viewer.isolate(null);
        break;
      case "focus":
        this.viewer.fitToView();
        break;
      case "hide":
        this.viewer.hide(dbId);
        break;
      case "show":
        this.viewer.show(dbId);
        break;
      case "toggleVisibility":
        this.viewer.toggleVisibility(dbId);
        break;
    }
  }
};

讲到这边你可能会问，到底要怎么自订这些点击交互行为呢？这其实颇容易的～基于上面讲述的内容，你可以通过下面的代码在 Forge Viewer 触发 Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT 事件时，将产生一个新的 ModelStructurePanel 取代 Forge Viewer 默认的那一个。

备注：对 Forge Viewer 有些熟悉的朋友可能知道，默认的 ModelStructurePanel 是在这个事件触发时被建立的。

viewer.addEventListener(Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT, function() {

    var options = {
      docStructureConfig: {
          click: {
              onObject: ["selectOnly"] //instead of toggleOverlayedSelection
          },
          clickShift: {
            onObject: ["isolate"] //instead of toggleMultipleOverlayedSelection
        },
          clickCtrl: {
          onObject: ["selectToggle"] //instead of toggleMultipleOverlayedSelection
        }
      }
    }

    var customModelStructurePanel =
      new Autodesk.Viewing.Extensions.ViewerModelStructurePanel(
        viewer, "Browser", options)

    viewer.setModelStructurePanel(customModelStructurePanel)
  })

最后，当然如果 ModelStructurePanel 自带的交互行为不满足你的需求时，你也可以将整个 ModelStructurePanel 复制出来，在 handleAction 这个方法里头加入自个的交互内容。如果不知道如何开始，你可以参到这篇英文博客：Supporting multiple models in the new ModelStructurePanel

GPU云服务器云服务器 ModelStructurePanel 订义线 Forge viewer

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92629.html

在Forge Viewer上显示自订义属性

摘要：最近有的小伙伴们都在询问要怎么在里显示自订义属性，要做到这个是挺容易的。在来我们透过继承来创建自个的属性面板使用的语法，部份代码来自的无法从服务器获取属性透过撰写括展让自定义属性窗取代自带的以上希望对各为小伙伴有帮助参考最近有 Autodesk Forge 的小伙伴们都在询问要怎么在 Viewer 里显示自订义属性，要做到这个是挺容易的。目前有两种方式可以做到这个效果，一种是直接添加...

seasonley 2019-08-21 17:12 评论0 收藏0
在 Forge Viewer 里加入自订义线

摘要：可能有许多原因你想在里加入自订义的线型，例如显示线框几何视觉化包围箱或者其他你想带给使用者的视觉回馈。下面是我传写的一个例子，他可以在选重构件后在场景里用自定义线型描绘它的包围箱，在线示例可以参考这里 showImg(https://segmentfault.com/img/bVVaUx?w=1794&h=930); 这篇文章的原著是 Autodesk AND 的 Philippe L...

zilu 2019-08-22 11:08 评论0 收藏0
自定义 Forge Viewer 右键菜单（Context Menu）

摘要：前阵子有些圈的朋友们都在询问同一个问题要怎么在的自带右键菜单上添加自定义项目或是只显示自订义项目以下将针对在自带右键菜单上添加自定义项目和只显示自订义项目的右键菜单进行说明。前阵子有些 Autodesk Forge 圈的朋友们都在询问同一个问题『要怎么在 Viewer 的自带右键菜单上添加自定义项目或是只显示自订义项目』～以下将针对『在自带右键菜单上添加自定义项目』和『只显示自订义...

Harriet666 2019-08-21 17:27 评论0 收藏0
在 Forge Viewer 里展示/隐藏构件材质

摘要：对于大多数的模型文档都可以透过服务提取转换在里渲染构件外观时所需的材质及贴图。所以我们可以透过它遍历所有材质，找出我们想隐藏贴图的那些材质，将它的颜色设置为灰色，同时也可以透过它将隐藏贴图的材质回复。这篇文章来自 Autodesk ADN 的梁晓冬，以下以我简称。对于大多数的模型文档都可以透过 Autodesk Forge Model Derivative 服务提取、转换在 Vie...

Dean 2019-08-21 16:55 评论0 收藏0
[重大更新] Forge Viewer 工具（Tool）优先级

摘要：前几天释出新版本的，自此版本开始引入优先级机制，每个都可以各自设置自个的优先级，而这个优先级会被用来对那些已经注册在里的进行排序，目前所有的优先级默认都是，并会以下面这个方式设置优先级的数值越高者则可以更优先处理的交互事件，如等，使用样例前几天 Autodesk Forge 释出新版本的 Viewer - v3.2，自此版本开始 Viewer Tool 引入优先级机制，每个 Tool...

rose 2019-08-21 17:19 评论0 收藏0