前言
在做BIM项目的时候，客户提了个为BIM标签添加引线的需求，开始只想着自定义，发现实现起来都差点意思，鼠标控制旋转的时候总有瑕疵，接着翻看BIMFACE官方文档，终有收获。
实现效果如图
image.png
官方示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>引线标签</title>
<style media="screen">
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
padding-right: 210px;
position: relative;
}
.view {
height: 100%;
}
.right-bar {
position: absolute;
right: 0;
top: 0;
width: 210px;
height: 100%;
border-left: 1px solid #d8d8d8;
vertical-align: top;
}
.title {
height: 36px;
border-bottom: 1px solid #d8d8d8;
padding: 0 10px;
line-height: 36px;
}
.button {
padding: 7px 24px;
border-radius: 3px;
margin-right: 10px;
}
.add {
color: #ffffff;
background: #32D3A6;
}
.cancel {
border: 1px solid #32D3A6;
color: #32D3A6;
}
.edit {
display: none;
padding: 10px;
border-bottom: 1px solid #d8d8d8;
}
.textarea {
width: 100%;
height: 90px;
border: 1px solid #ccc;
resize: none;
outline: none;
}
.tips {
padding: 10px;
font-size: 14px;
color: #666;
}
.new {
padding: 10px;
}
</style>
<!-- 引用BIMFACE的JavaScript显示组件库 -->
<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="view" id="view"></div>
<div class="right-bar">
<div class="title">引线标签</div>
<div class="tips" id="myTips"></div>
<div class="edit" id="edit">
<textarea id="textarea" class="textarea"></textarea>
<button class="button add" id="save">保存</button>
<button class="button cancel" id="cancel">取消</button>
</div>
<div class="new">
<input type="button" class="button add" value="新建引线标签" id="new">
</div>
</div>
</div>
<script type="text/javascript">
let viewer, drawable, selectedLabel;
let viewToken = 'd6df95a87c1e4a5b88c5abbb302431af';
let BimfaceLoaderConfig = new BimfaceSDKLoaderConfig();
BimfaceLoaderConfig.viewToken = viewToken;
BimfaceSDKLoader.load(BimfaceLoaderConfig, onSDKLoadSucceeded, onSDKLoadFailed);
function onSDKLoadSucceeded(viewMetaData) {
let view = document.getElementById('view');
let app = new Glodon.Bimface.Application.WebApplicationDemo(viewMetaData, view);
viewer = app._application.getViewer();
let drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
drawableConfig.viewer = viewer;
drawableConfig.maxNum = 10;
drawable = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
};
function onSDKLoadFailed(error) {};
let edit = document.getElementById("edit"),
textarea = document.getElementById("textarea"),
myTips = document.getElementById("myTips"),
newButton = document.getElementById("new"), // 新建引线标签
saveButton = document.getElementById("save"), // 保存
cancelButton = document.getElementById("cancel"), // 取消
data = {};
let clickEvent = function(componentData) {
if (componentData && componentData.objectId) {
myTips.style.display = "none";
edit.style.display = "block";
data.componentId = componentData.objectId;
data.worldPosition = componentData.worldPosition;
} else {
myTips.innerText = "请选择一个合适的位置。";
myTips.style.display = "block";
}
}
let saveFn = function() {
let text = textarea.value;
if (!text.trim()) {
myTips.innerText = "标签内容不能为空。";
myTips.style.display = "block";
return false;
}
if (data.item) {
data.item.setText(text);
} else {
//引线标签的配置类
let config = new Glodon.Bimface.Plugins.Drawable.LeadLabelConfig();
//引线折点的相对位置
config.offset = {
x: 37,
y: -57
};
//引线标签的内容
config.text = text;
//引线标签关联的构件
config.objectId = data.componentId;
//引线标签的世界坐标
config.worldPosition = data.worldPosition;
//引线标签是否可拖拽
config.draggable = true;
//引线标签的视图
config.viewer = viewer;
let label = new Glodon.Bimface.Plugins.Drawable.LeadLabel(config);
//引线标签的双击事件
label.onDoubleClick(function(item) {
newButton.style.display = "none";
edit.style.display = "block";
textarea.value = item.getText();
data.item = item;
});
//引线标签的左键点击事件
label.onClick(function(item) {
console.log(label.getObjectId(item.id));
selectedLabel = item;
})
drawable.addItem(label);
viewer.removeEventListener(Glodon.Bimface.Application.WebApplication3DEvent.ComponentsSelectionChanged, clickEvent);
}
data = {};
textarea.value = "";
edit.style.display = "none";
myTips.style.display = "none";
newButton.style.display = "block";
}
newButton.addEventListener("click", function() {
viewer.addEventListener(Glodon.Bimface.Application.WebApplication3DEvent.ComponentsSelectionChanged, clickEvent);
this.style.display = "none";
myTips.innerText = "请在模型上选择标签位置。";
myTips.style.display = "block";
});
saveButton.addEventListener("click", saveFn);
cancelButton.addEventListener("click", function() {
viewer.removeEventListener(Glodon.Bimface.Application.WebApplication3DEvent.ComponentsSelectionChanged, clickEvent);
edit.style.display = "none";
newButton.style.display = "block";
textarea.value = "";
data = {};
})
document.addEventListener("keyup", function(e) {
e = e || event;
if (selectedLabel && (e.keyCode == 8 || e.keyCode == 46)) {
drawable.removeItemById(selectedLabel.id);
selectedLabel = null;
}
})
</script>
官网资料： BIMFACE引线标签
点赞加关注，永远不迷路
网友评论