BIMFACE之Drawable。

在viewer2D或viewer3D的视图上添加外部元素时，首先要创建一个外部元素的容器，用以添加，删除各种元素。
目前只有rvt与rvt集成模型，skp，IFC，IGMS，dwg可用。

<div id='domId'></div>
<button id='drawableBt'>删除</button>
<script>

var  drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig(); // 配置项
     drawableConfig.viewer; // 外部的容器必须注册到一个具体的Viewer上，如3D
     
     
 var drawable = new Glodon.Bimface.Plugins.DrawableContainer(配置项);  // 创建drawable,并且传入配置项
 var drawableBt = document.getElementById('drawableBt'); 
       drawable.addItem(drawableBt); // 添加外部元素
       drawable.hideItemsById(id); // 通过id隐藏外部元素
       drawable.hideAllItem(); // 隐藏所有外部元素
       drawable.showItemsById(id);// 通过id显示外部元素  
       drawable.removeItemById(id); // 通过id移除外部元素
       drawable.getItemById(id); // 通过id获取外部元素
       drawable.getAllItems(); // 获取全部外部元素 
       drawable.addItems(items); // 添加外部元素列表  items为待定添加元素
       drawable.clear(); // 清空外部元素 


var  drawableItemConfig = new Glodon.Bimface.Plugins.Drawable.DrawableItemConfig(); // 外部元素的配置项
        drawableItemConfig.id; // 外部元素的id
        drawableItemConfig.worldPosition; // 外部元素的世界坐标如{x:0,y:0,z:0}
        drawableItemConfig.tooltip; // tip的内容
        drawableItemConfig.tooltipStyle; // tip样式
        drawableItemConfig.draggable; // 是否开启拖拽 暂仅支持二位图纸  boolean

var  drawableItme = new Glodon.Bimface.Plugins.Drawable.DrawableItem(配置项); //某个被添加到视图中的外部元素，由DrawableContainer管理
     drawableItme.onClick(callback(data)); // 左键点击事件  成功之后回调函数 参数为标签信息
     drawableItme.onRightClick(callback(data)); // 右键点击事件  回调函数 参数为标签信息
     drawableItme.onEndDrag(callback(data)); // 拖拽事件 回调函数 参数为标签信息
     drawableItme.setTooltipStyle(css); / / 设置tip样式  {  }
     drawableItme.getTooltipStyle(); // 获取tip样式 





//定义外部元素的配置项
var customItemConfig = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig(); 
    customItemConfig.width; // 自定义外部元素的宽度
    customItemConfig.height; // 自定义外部元素的高度
    customItemConfig.opacity;  // 自定义外部元素的透明度
    customItemConfig.content; // 自定义外部元素的内容，可以是任意DOM元素或者文本
    customItemConfig.offsetX; // 自定义外部元素沿X轴的偏移量
    customItemConfig.offsetY; // 自定义外部元素沿Y轴的偏移量

// 某个具体的被添加到视图中外部元素，有DrawableContainer管理。
var customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(配置项); 
      customItem.getWidth(); // 获取宽度 标签的宽度
      customItem.setWidth(width); // 设置宽度
      customItem.getHeight(); // 获取高度
      customItem.setHeight(height); // 设置高度
      customItem.getOpacity(); // 获取透明度
      customItem.setOpacity(opacity); // 设置透明度
      customItem.setContent(content); // 设置标签内容
      customItem.getOffsetX(); // 获取标签沿X轴偏移量
      customItem.setOffsetX(x); // 设置向X轴偏移量  x==number 
      customItem.getOffserY(); // 获取标签的沿Y轴的偏移量
      customItem.setOffserY(y); // 设置沿Y轴的偏移量  y==number 






// 自定义标签
var drawableContext = new Glodon.Bimface.Plugins.DrawableContext(); 
    drawableContext.rootDomElement; // dom的根元素
    drawableContetx.clientPosition; // 屏幕坐标




// 引线标签的配置项
var leadLableConfig = new Glodon.Bimface.Plugins.Drawable.LeadLableConfig();
    leadLableConfig.id; // 引线标签id
    leadLableConfig.objectId;// 引线标签所关联的构件id
    leadLableConfig.opacity; // 引线标签底色的透明度
    leadLableConfig.text; //引线标签的内容，支持文本
    leadLableConfig.width ; // 引线标签的宽度
    leadLableConfig.worIdPosition; // 引线标签的世界坐标 如{x:0,y:0,z:0}

// DrawableItem的子类，表示一种类型的外部元素，引线标签，仅在viewer3D视图中使用。
var  leadLable = new Glodon.Bimface.Plugins.Drawable.LeadLable(配置项);
     leadLable.onClick(callback(data)); // 左键点击事件  回调函数参数为 引线标签信息
     leadLable.onRightClick(callbak(data)); // 右键点击事件，回调函数参数为引线标签信息
     leadLable.onDoubleClick(callback); // 双击事件，回调函数参数为引线标签信息
     leadLable.onEndDrag(callback(data)); // 拖拽事件  回调函数参数为引线标签信息
     leadLable.getWidth(); // 获取标签宽度
     leadLable.setWidth(wdith); / /设置标签宽带
     leadLable.getOpacity(); // 获取标签底色透明度
     leadLable.setOpacity(); // 设置标签底色透明度
     leadLable.getText(); / /获取标签文本内容
     leadLable.setText(text); //设置文本内容  
     leadLable.getWorldPosition(); // 获取引线标签三维坐标位置
     leadLable.getObjectId(); // 获取与标标签线关联的构件id
     leadLabel.associateComponentById(构件id); // 根据构件ID将引线标签与构件关联






// 图片标签的配置
var ImageConfig  = new Glodon.Bimface.Plugins.Drawable.ImageConfig();
    ImageConfig.width; // 宽度 默认值为32
    ImageConfig.height; // 高度  默认值为 32
    ImageConfig.opacity; // 透明度 默认值为 0.75
    ImageConfig.src; // 图片路径
    ImageConfig.offsetX; // 沿X轴偏移量
    ImageConfig.offsety; // 沿Y轴偏移量
    
// DrawableItem的子类，表示一种类型的外部元素 图片
var Image = new  Glodon.Bimface.Plugins.Drawable.Image(配置项); 
    Image.draw(context); // 图片标签绘制事件
    Image.onClick(callback(data)); // 图片标签的点击事件   函数加载成功后的参数为图片属性
    Image.getWidht(); // 获取宽度
    Image.setWidht(); // 设置宽度
    Image.getHeight(); // 获取高度
    Image.setHeight(height);  // 设置高度
    Image.getOpacity(); // 获取透明度
    Image.setOpacity(opacity); // 设置标签透明度
    Image.getSrc(); // 获取标签路径
    Image.getOffsetX(); // 设置向X轴的偏移量
    Image.setOffsetX(x); // 获取标签沿X轴的偏移量
    Image.getOffsetY(); // 设置沿Y轴的偏移量
    Image.setOffsetY(y); // 获取标签沿Y轴的偏移量








//小地图标签的配置项
var miniTagConfig = new Glodon.Bimface.Drawable.MiniTagConfig();
    miniTagConfig.floorList ; //  楼层列表
    miniTagConfig.height; // 小地图标签的图片高度  默认值20px
    miniTagConfig.id; // 小地图标签的id
    miniTagConfig.objectId; //小地图标签所关联构件的id
    miniTagConfig.src; // 图片路径
    miniTagConfig.width; // 宽度 默认值为20px
    miniTagConfig.worldPosition; // 平面位置 


//DrawableItem的子类，表示一种类型的外部元素，小地图标签，仅在viewer3D视图中的小地图可用
var miniTag = new Glodon.Bimface.Plugins.Drawable.MiniTag(配置项); 
    miniTag.getFloorList(); // 获取小地图标签所在的楼层
    miniTag.getHeight(); // 获取小地图标签的图片高度
    miniTag.getId(); //获取小地图标签的id
    miniTag.getObjectId(); // 获取小地图标签所关联构件的id
    miniTag.getSrc(); // 获取小地图标签的图片路径
    miniTag.getWidth(); // 获取小地图标签的图片宽度
    miniTag.getWorldPosition(); // 获取小地图标签的平面位置
    miniTag.onClick(callback(data)); // 左键点击事件  回调函数的参数为引线标签信息
    miniTag.onRightClick(callback(data)); // 右键点击事件 回调函数参数为引线标签信息
    miniTag.onDoubleClick(callback(data));// 双击事件  其余同上
    miniTag.setHeight(height); // 设置小地图标签的高度
    miniTag.setFloorList(array-楼层列表); // 设置小地图标签所在的楼层 
    miniTag.setObjectId(关联构件的id); // 设置小地图标签所关联构件的id
    miniTag.setSrc(图片路径); // 设置小地图标签的图片路径
    miniTag.setWorldPosition(平面位置); // 设置小地图标签的平面位置
.</script>