zoukankan      html  css  js  c++  java
  • 为Autodesk Viewer添加自定义工具条的更好方法

    上一篇文章中我介绍了使用Autodesk Viewer的UI API来给viewer添加自定义工具条的方法,看起来很简单是吧。不过有个问题,就是关于自定义工具条的信息(包括按钮的文本、图标、样式、callback等等)全都散落在代码中,如果要添加或者修改的话,得特别小心的扫描代码,非常容易出错。有没有更好的办法呢?这篇文章就来介绍一下。

    既然关于Toolbar button等京城需要更改的部分散落到各处不方便维护,那我就把他们集中到一起独立出来。于是我写了个自定义的toolbarConfig对象,采用JSON格式,刚好符合JavaScript的语法,如果我需要添加或者修改工具条或按钮,只需要修改这个config对象就可以了:

    /////////////////////////////////////////////////////////////////////
    // custom toobar config
    var toolbarConfig = {
        'id': 'toolbar_id_1',
        'containerId': 'toolbarContainer',
        'subToolbars': [
            {
                'id': 'subToolbar_id_non_radio_1',
                'isRadio': false,
                'visible': true,
                'buttons': [
                    {
                        'id': 'buttonRotation',
                        'buttonText' : 'Rotation',
                        'tooltip': 'Ratate the model at X direction',
                        'cssClassName': 'glyphicon glyphicon glyphicon-play-circle',
                        'iconUrl' :'Images/3d_rotation.png',
                        'onclick': buttonRotationClick
                    },
                    {
                        'id': 'buttonExplode',
                        'buttonText': 'Explode',
                        'tooltip': 'Explode the model',
                        'cssClassName': '',
                        'iconUrl': 'Images/explode_icon.jpg',
                        'onclick': buttonExplodeClick
                    }

                ]
            },
            {
                'id': 'subToolbar_id_radio_1',
                'isRadio': true,
                'visible': true,
                'buttons': [
                    {
                        'id': 'radio_button1',
                        'buttonText': 'radio_button1',
                        'tooltip': 'this is tooltip for radio button1',
                        'cssClassName': '',
                        'iconUrl': '',
                        'onclick': radioButton1ClickCallback
                    },
                    {
                        'id': 'radio_button2',
                        'buttonText': 'radio_button2',
                        'tooltip': 'this is tooltip for radio button2',
                        'cssClassName': '',
                        'iconUrl': '',
                        'onclick': radioButton2ClickCallback
                    }

                ]
            }
        ]

    };

    function buttonRotationClick(e) {

       
    }
     

    function buttonExplodeClick() {
        
    }

    function button2ClickCallback(e) {
        alert('Button2 is clicked');
    }
    function radioButton1ClickCallback(e) {
        alert('radio Button1 is clicked');
    }
    function radioButton2ClickCallback(e) {
        alert('radio Button2 is clicked');
    }

    接下来创建一个工具方法,解读这个toolbarConfig并利用viewer UI API来创建对于的工具条和按钮,使用方法也和简单:

    ////add custom toolbar , usage example:
    //addToolbar(toolbarConfig);

    ////////////////////////////////////////////////////////////////////////////
    function addToolbar(toolbarConfig, viewer) {

        //find the container element in client webpage first
        var containter = document.getElementById(toolbarConfig.containerId);

        // if no toolbar container on client's webpage, create one and append it to viewer
        if (!containter) {
            containter = document.createElement('div');
            containter.id = 'custom_toolbar';
            //'position: relative;top: 75px;left: 0px;z-index: 200;';
            containter.style.position = 'relative';
            containter.style.top = '75px';
            containter.style.left = '0px';
            containter.style.zIndex= '200';
            viewer.clientContainer.appendChild(containter);
        }

        //create a toolbar
        var toolbar = new Autodesk.Viewing.UI.ToolBar(containter);

        for (var i = 0, len = toolbarConfig.subToolbars.length; i < len; i++) {
            var stb = toolbarConfig.subToolbars[i];
            //create a subToolbar
            var subToolbar = toolbar.addSubToolbar(stb.id, stb.isRadio);
            subToolbar.setToolVisibility(stb.visible);

            //create buttons
            for (var j = 0, len2 = stb.buttons.length; j < len2; j++) {
                var btn = stb.buttons[j];
                var button = Autodesk.Viewing.UI.ToolBar.createMenuButton(btn.id, btn.tooltip, btn.onclick);
                //set css calss if availible
                if (btn.cssClassName) {
                    button.className = btn.cssClassName;
                }
                //set button text if availible
                if (btn.buttonText) {
                    var btnText = document.createElement('span');
                    btnText.innerText = btn.buttonText;
                    button.appendChild(btnText);
                }
                //set icon image if availible
                if (btn.iconUrl) {
                    var ico = document.createElement('img');
                    ico.src = btn.iconUrl;
                    ico.className = 'toolbar-button';
                    button.appendChild(ico);
                }
                //add button to sub toolbar
                toolbar.addToSubToolbar(stb.id, button);

            }



        }

    下面就是运行效果了:

    image

  • 相关阅读:
    图书馆业务制图
    单元测试(输入一个数组和它的大小,输出这个数组中最大子数组的和)
    build to win读后感
    小学四则运算
    微信公众平台具体方案和人员分工
    问卷调查结果剖析
    题目确定与需求分析
    课程介绍与团队简介
    网站LOGO以及网页样式
    C Sharp进行网站信息抽取与小型内部搜索引擎的讲解
  • 原文地址:https://www.cnblogs.com/junqilian/p/3912274.html
Copyright © 2011-2022 走看看