为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);

        }



    }

下面就是运行效果了：