添加自定义属性到Viewer的属性面板

AJie 发布于2019-08-23 17:14 / 611人阅读

摘要：另一个相关的是属性检查器这篇博客，其是通过建立一个工具栏按钮的方式来新增面板，它是可以正常运作的，但它的做法并非取代现有的属性面板，不在今天要讨论的范围。

这是一个常被提起的问题，第一次是在「添加自定义属性到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添加只读的属性吗自适应属性

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

转载请注明本文地址：https://www.ucloud.cn/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