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

下來我們會介紹一種更容易組織和維護的方式來建立自定義工具條。