xBIM WeXplorer 設置模型顏色
阿新 • • 發佈：2018-03-03
應用 自己 body mes mvc exp class IT 操作
目錄
基礎
- 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>
xBIM WeXplorer 設置模型顏色