添加自定義屬性到Viewer的屬性面板

AJie 發布于2019-08-23 17:14 / 612人閱讀

摘要：另一個相關的是屬性檢查器這篇博客，其是通過建立一個工具欄按鈕的方式來新增面板，它是可以正常運作的，但它的做法并非取代現有的屬性面板，不在今天要討論的范圍。

這是一個常被提起的問題，第一次是在「添加自定義屬性到Viewer的屬性面板」這篇博客被提出，但因自V4開始，Viewer的CSS有重大變更，導致該方法在新版的 Viewer已無法使用。另一個相關的是「Viewer屬性檢查器」這篇博客，其是通過建立一個工具欄按鈕的方式來新增面板，它是可以正常運作的，但它的做法并非取代現有的屬性面板，不在今天要討論的范圍。

那我們該怎么做才能取代現有的屬性面板呢?

事實上，我們有一個接受內建面板 ViewerPropertyPanel 對象的方法叫 viewer.setPropertyPanel 可以使用。因此，最簡單的操作方式是使用 setPropertyPanel 這個方法，再替換 setProperties 這方法的內容。為了新增更多我們想要的屬性數據，讓我們也復寫setNodeProperties 這個接受dbId作為函數變量的方法，以下是部分程序代碼:

// *******************************************
// Custom Property Panel
// *******************************************
function CustomPropertyPanel(viewer, options) {
    this.viewer = viewer; 
    this.options = options; 
    this.nodeId = -1; // dbId of the current element showing properties
    Autodesk.Viewing.Extensions.ViewerPropertyPanel.call(this, this.viewer);
}
CustomPropertyPanel.prototype = Object.create(Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype);
CustomPropertyPanel.prototype.constructor = CustomPropertyPanel;

CustomPropertyPanel.prototype.setProperties = function (properties, options) {
    Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setProperties.call(this, properties, options);

    // add your custom properties here
    // for example, let"s show the dbId and externalId
    var _this = this;
    // dbId is right here as nodeId
    this.addProperty("dbId", this.nodeId, "Custom Properties");
    // externalId is under all properties, let"s get it!
    this.viewer.getProperties(this.nodeId, function(props){
        _this.addProperty("externalId", props.externalId, "Custom Properties");
    })
}

CustomPropertyPanel.prototype.setNodeProperties = function (nodeId) {
    Autodesk.Viewing.Extensions.ViewerPropertyPanel.prototype.setNodeProperties.call(this, nodeId);
    this.nodeId = nodeId; // store the dbId for later use
};

為了方便使用，我們將之包裝在Viewer擴展中。這里有篇博客「擴展概念：工具欄與面板」在討論擴充展架的基本概念，這里我們只使用它創建擴展的部分(不是工具欄或面板的部分)。以下擴展代碼使用剛才建立的面板，并通過 setPropertyPanel 使之與 Viewer 連結。(這個擴充將負責注冊和取消注冊我們的自定義屬性面板。)

// *******************************************
// Custom Property Panel Extension
// *******************************************
function CustomPropertyPanelExtension(viewer, options) {
    Autodesk.Viewing.Extension.call(this, viewer, options);

    this.viewer = viewer;
    this.options = options;
    this.panel = null;
}

CustomPropertyPanelExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
CustomPropertyPanelExtension.prototype.constructor = CustomPropertyPanelExtension;

CustomPropertyPanelExtension.prototype.load = function () {
    this.panel = new CustomPropertyPanel(this.viewer, this.options);
    this.viewer.setPropertyPanel(this.panel);
    return true;
};

CustomPropertyPanelExtension.prototype.unload = function () {
    this.viewer.setPropertyPanel(null);
    this.panel = null;
    return true;
};

Autodesk.Viewing.theExtensionManager.registerExtension("CustomPropertyPanelExtension", CustomPropertyPanelExtension);

最后一步是載入這個擴展。如果您的應用程序依照「基本應用程序教學」建立的，在你的程序代碼里會有一行像這個樣子的，這里我們只需加入擴充設定即可：

// 從這樣
viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);

// 改成這樣
viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, { extensions: ["CustomPropertyPanelExtension"] });

GPU云服務器云服務器自定義屬性值 dom自定義屬性 js添加只讀的屬性嗎自適應屬性

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104014.html

在Forge Viewer上顯示自訂義屬性

摘要：最近有的小伙伴們都在詢問要怎么在里顯示自訂義屬性，要做到這個是挺容易的。在來我們透過繼承來創建自個的屬性面板使用的語法，部份代碼來自的無法從服務器獲取屬性透過撰寫括展讓自定義屬性窗取代自帶的以上希望對各為小伙伴有幫助參考最近有 Autodesk Forge 的小伙伴們都在詢問要怎么在 Viewer 里顯示自訂義屬性，要做到這個是挺容易的。目前有兩種方式可以做到這個效果，一種是直接添加...

seasonley 2019-08-21 17:12 評論0 收藏0
自訂義 Forge Viewer ModelStructurePanel 的交互行為

摘要：在官方釋出版的同時發布了新版本的，這個面版已被整個重新改寫，這次更新也加入一些新的交互行為，下面我們將會稍作解釋。這禮拜的小技巧是關于如何以不加入太多的 JavaScript 的方式自訂義 ModelStructurePanel 的交互行為，這個小技巧受到這篇問與答的啟發：Prevent zoom in Forge viewer when clicking in Model Brow...

xialong 2019-08-22 13:55 評論0 收藏0
前端技術博客文章、書籍積累

摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行書籍《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...

LiangJ 2019-08-30 12:58 評論0 收藏0
前端技術博客文章、書籍積累

摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行書籍《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...

codercao 2019-08-19 18:10 評論0 收藏0
前端技術博客文章、書籍積累

摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優雅地使用把標簽放在結束標簽之后結束標簽之前的差別什么是響應式設計怎樣進行書籍《JavaScriptDOM編程藝術》《JavaScript高級程序設計》《JavaScript框架設計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設計模式》《J...

huayeluoliuhen 2019-08-01 15:13 評論0 收藏0