自訂義 Forge Viewer ModelStructurePanel 的交互行為

xialong 發布于2019-08-22 13:55 / 2794人閱讀

摘要：在官方釋出版的同時發布了新版本的，這個面版已被整個重新改寫，這次更新也加入一些新的交互行為，下面我們將會稍作解釋。

這禮拜的小技巧是關于如何以不加入太多的 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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