欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

xBIM WeXplorer 设置模型颜色

程序员文章站 2022-04-08 11:26:14
目录 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xViewer的导航,相机、剖切、隐藏 等操作 xBIM WeXplorer 设置模型颜色 xBIM 综合使用 ......

   目录

    基础
     高级应用
  • 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>