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

下面就是运行效果了：