鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ 怎么在BIMFACE中自定義標(biāo)簽,并且綁定事件?

怎么在BIMFACE中自定義標(biāo)簽,并且綁定事件?

怎么在BIMFACE中自定義標(biāo)簽,并且綁定事件?

回答
編輯回答
放開(kāi)她

【詳細(xì)見(jiàn)下面鏈接】

如何在viewer2D或viewer3D的視圖上打自定義標(biāo)簽?

2D圖紙上增加自定義標(biāo)簽

function onSDKLoadSucceeded(viewMetaData){

// 初始化viewer
var view = document.getElementById('view');
var appConfig = new Glodon.Bimface.Application.WebApplication2DConfig();
appConfig.domElement = view;
var app = new Glodon.Bimface.Application.WebApplication2D(appConfig);
app.load(viewToken);
var events = Glodon.Bimface.Viewer.Viewer2DEvent;
var viewer = app.getViewer();
// 初始化DrawableContainer
var drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
drawableConfig.viewer = viewer;
drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
// 響應(yīng)MouseClick事件
viewer.addEventListener(events.MouseClicked,function(objectData) {
       var config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
       // 創(chuàng)建自定義元素,可以是一個(gè)dom element,也可以是個(gè)字符串
       // ***************************************************
        var circle = document.createElement('div');
        circle.style.width = '80px';
        circle.style.height = '32px';
        circle.style.borderRadius = '10%';
        circle.style.background = '#fff';
        circle.innerText = '自定義標(biāo)簽';
        config.content = circle;
        // ****************************************************
      //允許拖拽
        config.draggable =true;
        config.viewer = viewer;
        //增加一個(gè)Tip提示
        config.tooltip = 'my tip';
        config.worldPosition = objectData.worldPosition;

      //生成customItem實(shí)例
      var customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);

      //自定義標(biāo)簽的鼠標(biāo)左鍵事件
      customItem.onClick(function(item) {
           alert('left click');
      });
      //自定義標(biāo)簽的鼠標(biāo)右鍵事件
      customItem.onRightClick(function(item) {
            alert('right click');
      });
    //拖拽事件
      customItem.onEndDrag(function(item) {
            console.log(JSON.stringify(item.worldPosition));
      });

      // 添加自定義標(biāo)簽
      drawableContainer.addItem(customItem)
      //設(shè)置Tip的樣式
      customItem.setTooltipStyle({border:'1px'});
    });
};

圖片描述

2017年10月5日 16:04