xBIM WeXplorer 設置模型顏色

時間 2019-11-29

標籤 xbim wexplorer 設置模型顏色简体版

原文原文鏈接

本次咱們探討模型顏色操做，正如您已經注意到的模型在默認狀況下具備合理的圖形表示形式。這是從 IFC 模型, 它應該在全部的工具看起來相同, 它應該看起來像在您或您的用戶的創做環境。可是，有時可以對這種表示進行修改以向用戶報告某種結果 (分類, 錯誤報告, 衝突檢測等) 很是重要。javascript

咱們將使用在HTML 元素的onclick 屬性中定義的Javascript函數使用難看的代碼，這是不推薦的作法，但爲了清晰和簡單起見，鼓勵您遵循這些準則來編寫可持續和清晰的Web應用程序。css

首先有必要定義本身的風格，有簡單的函數 defineStyle()來作到這一點。您最多能夠定義224種樣式。咱們將在如下代碼中爲每種產品類型定義新顏色：html

<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（）函數。java

還有一個視覺特徵，那就是突出顯示。你能夠把它看做是一個選擇，但這樣作並非太好。它將全部最終的選擇邏輯留給你。這只是一種視覺表現。canvas

<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 代碼以下：dom

 <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>