为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);
}
}
下面就是运行效果了:
相关文章
- centos误删除系统自带的python解决方法
- SpringSecurity(前后端分离版)[7]-自定义权限校验方法
- 三种常用的迭代搜索优化方法
- 在Android开发中,定时执行任务的3种实现方法
- dedecms list 添加自定义字段方法
- PHP开发接口使用RSA进行加密解密方法
- js data日期初始化的5种方法
- vue.js计算属性的setter和getter方法
- 5.HiveSQL中内置函数与自定义函数使用方法详解
- element-UI中el-select下拉框可搜索时候,filter-method自定义搜索方法
- thinkphp使用自定义类方法
- Eclipse Class Decompiler——Java反编译插件手工配置方法
- Vue自定义指令使用方法详解 和 使用场景
- PyQt学习随笔:应用中通过installEventFilter安装重写的eventFilter捕获应用事件的方法
- PyQt学习随笔:通过自定义类重写QApplication的notify方法捕获应用的所有消息
- Python中自定义类如果重写了__repr__方法为什么会影响到str的输出?
- 在Linux中查看分区表的4种方法
- 自定义控件常用方法总结
- Python pandas 合并两个或多个DataFrame的方法代码
- python遍历数组的方法小结
- MySQL——修改root密码的4种方法(以windows为例)
- VLSI 半定制设计方法 与 全定制设计方法【VLSI】
- js原生创建模拟事件和自定义事件的方法
- gdb加载so库符号失败的解决方法
- Android引入外部自定义特殊字体的方法
- javascript封装自定义滚动条方法,可自定义四个边框滚动条
- 辨析Java方法参数中的值传递和引用传递
- 微信小程序 传值取值的几种方法总结,百分百会用到
- Yii自定义配置文件存放方法