首页 > 代码库 > 为Autodesk Viewer添加自定义工具条
为Autodesk Viewer添加自定义工具条
如果你参加过我们近期的活动,你就会频繁的听到我们现在正在做的Autodesk Viewer大模型浏览器,这是一个不需要下载任何插件,基于WebGL技术的浏览器,可以支持几十种数据格式。同时viewer也提供了API,你可以把这个viewer嵌入到你自己的web程序中。我们也写了不少sample,发布到了 github 上,这些示例都需要ConsumerKey,你需要向Autodesk来申请,目前该产品还没有正式发布,我们只邀请了一些客户做测试,很快就会发布,大家还需要耐心等待一下。
在最近的code push中新增加了自定义界面API,使用这些API你可以创建和viewer内置工具条一样风格的自定义工具条。首先你需要在页面上创建一个容器,一般是div标签,用css控制好它的位置,下面的Javascript代码来生成自定义的工具条:
(screen-shot)
function addToolBar(container) {
//create a toolbar
var toolbar = new Autodesk.Viewing.UI.ToolBar(container);
//create a subToolbar
var subToolbar = toolbar.addSubToolbar(‘sub1‘);
//add some buttons to it
var button1 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button1",
"Tooltip for Button1",
function (e) {
alert("Button1 is clicked.");
});
//add icon for the button
button1.className = ‘glyphicon glyphicon-euro‘;
var button2 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button2",
"Tool tip for Button2",
function (e) {
alert("Button2 is clicked");
});
//Add buttons to subtoolbar
toolbar.addToSubToolbar("sub1", button1);
toolbar.addToSubToolbar("sub1", button2);
//create a radio sub toolbar
var radioSubToolbar = toolbar.addSubToolbar(‘radioSub2‘, true); //id, isRadio
// add some buttons to it
var button3 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button3",
"Tool tip for Button3",
function (e) {
alert("Button2 is clicked");
});
var button4 = Autodesk.Viewing.UI.ToolBar.createMenuButton("Button4",
"Tool tip for Button4",
function (e) {
alert("Button4 is clicked");
});
//add buttons to radioSubToolbar
toolbar.addToSubToolbar("radioSub2", button3);
toolbar.addToSubToolbar("radioSub2", button4);
}
下来我们会介绍一种更容易组织和维护的方式来创建自定义工具条。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。