目录
基础
- xBIM WeXplorer 简要介绍
- xBIM WeXplorer xViewer 基本应用
- xBIM WeXplorer xViewer 浏览器检查
- xBIM WeXplorer xViewer的导航，相机、剖切、隐藏 等操作
- xBIM WeXplorer 设置模型颜色
高级应用
- xBIM 综合使用案例与 ASP.NET MVC 集成（一）
- xBIM 综合使用案例与 ASP.NET MVC 集成（二）
- xBIM 综合使用案例与 ASP.NET MVC 集成（三）
本次我们探讨模型颜色操作，正如您已经注意到的模型在默认情况下具有合理的图形表示形式。这是从 IFC 模型, 它应该在所有的工具看起来相同, 它应该看起来像在您或您的用户的创作环境。但是，有时能够对这种表示进行修改以向用户报告某种结果 (分类, 错误报告, 冲突检测等) 非常重要。
我们将使用在HTML 元素的onclick 属性中定义的Javascript函数使用难看的代码，这是不推荐的做法，但为了清晰和简单起见，鼓励您遵循这些准则来 编写可持续和清晰的Web应用程序。
首先有必要定义自己的风格，有简单的函数 defineStyle()来做到这一点。您最多可以定义224种样式。我们将在以下代码中为每种产品类型定义新颜色：
<button onclick="Recolour()">按类型重新着色</button> <button onclick="if (viewer) viewer.resetStyles();">重置</button> <script type="text/javascript"> function Recolour() { if (!viewer) return; var index = 0; for (var i in xProductType) { var type = xProductType[i]; var colour = [Math.random() * 255, Math.random() * 255, Math.random() * 255, 255]; viewer.defineStyle(index, colour); viewer.setStyle(index, type); index++; } }; </script>
您可以根据需要扩展此示例。只需定义0 - 224种颜色样式，并将其设置为产品或产品类型的覆盖样式。如果您想将样式重置为其默认使用的resetStyles（）函数。
还有一个视觉特征，那就是突出显示。你可以把它看作是一个选择，但这样做并不是太好。它将所有最终的选择逻辑留给你。这只是一种视觉表现。
<select id="cmbSelection"> <option value="noAction">无</option> <option value="select">选择</option> </select> <button onclick="if (viewer) viewer.resetStates()">重置</button> <script type="text/javascript"> function initHighlighting() { viewer.on('pick', function (args) { var cmb = document.getElementById('cmbSelection'); var option = cmb.value; switch (option) { case 'select': viewer.setState(xState.HIGHLIGHTED, [args.id]); break; case 'hide': viewer.setState(xState.HIDDEN, [args.id]); break; default: break; } }); }; </script>
这种方法的好处在于突出显示与其他视觉外观是分开的。您不能同时突出显示和隐藏产品，但这是有道理的。重要的是您可以显示分析结果并同时进行选择。如果你放弃选择，你仍然有一个有效的结果表示。您通常可以以任何方式组合样式和状态。
整体的HTML 代码 如下：
<link href="styles/xviewer-styles.css" rel="stylesheet" /> <script src="scripts/xbim-viewer.debug.bundle.js"></script>
<body> <div id="main"> <div> <div class="xviewer-control"> <button onclick="Recolour()">按类型重新着色</button> <button onclick="if (viewer) viewer.resetStyles();">重置样式</button> <script type="text/javascript"> function Recolour() { if (!viewer) return; var index = 0; for (var i in xProductType) { var type = xProductType[i]; var colour = [Math.random() * 255, Math.random() * 255, Math.random() * 255, 255]; viewer.defineStyle(index, colour); viewer.setStyle(index, type); index++; } }; </script> </div> <div class="xviewer-control"> 选择操作: <select id="cmbSelection"> <option value="noAction">无</option> <option value="select">选择</option> <option value="hide">隐藏</option> </select> <button onclick="if (viewer) viewer.resetStates()">重置</button> <script type="text/javascript"> function initHighlighting() { viewer.on('pick', function (args) { var cmb = document.getElementById('cmbSelection'); var option = cmb.value; switch (option) { case 'select': viewer.setState(xState.HIGHLIGHTED, [args.id]); break; case 'hide': viewer.setState(xState.HIDDEN, [args.id]); break; default: break; } }); }; </script> </div> </div> <canvas id="viewer" width="500" height="300"></canvas> <div> 您选择产品的编号: <span id="productId">model</span>. </div> <div id="errors"></div> <script type="text/javascript"> //检查 var check = xViewer.check(); var viewer = null; var pickedId = null; if (check.noErrors) { viewer = new xViewer('viewer'); viewer.on('loaded', function () { initHighlighting(); viewer.start(); }); viewer.on('error', function (arg) { var container = document.getElementById('errors'); if (container) { //相关的错误 container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre> <br />" + container.innerHTML; } }); viewer.on('pick', function (args) { var id = args.id; var span = document.getElementById('productId'); if (span) { span.innerHTML = id ? id : 'model'; } }); viewer.load('data/SampleHouse.wexbim'); } else { var msg = document.getElementById('errors'); for (var i in check.errors) { var error = check.errors[i]; msg.innerHTML += "<pre style='color: red;'>" + error + "</pre> <br />"; } } </script> </div>