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>

原文地址:https://www.cnblogs.com/w2011/p/8490421.html

时间: 2024-11-10 22:50:28

xBIM WeXplorer 设置模型颜色的相关文章

xBIM WeXplorer

目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xViewer的导航,裁剪和隐藏 xBIM WeXplorer  设置模型颜色 类 OrthogonalCamera PerspectiveCamera Prerequisities xBrowser xNavigationCube xNavigationHome xViewer xVisualAssi

xBIM WeXplorer xViewer 基本应用

目录 基础 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 集成(三) 原文地址:https://w

xBIM WeXplorer xViewer 浏览器检查

目录 基础 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 集成(三) 在之前的博客xBIM WeX

Android一个TextView设置多种颜色

有时候一个文本框为了强调内容需要显示不同颜色,用以下代码可以轻松实现 //为文本框设置多种颜色 textView=(TextView)findViewById(R.id.text_show); SpannableStringBuilder style = new SpannableStringBuilder("备注:签收人(张三)"); style.setSpan(new ForegroundColorSpan(Color.BLUE), 0, 3, Spannable.SPAN_EXC

android 设置字体颜色、EditText自动输入转换成大写字母的多种方式

在TextView上面设置某一个字的字体颜色为指定颜色时,可以通过java类SpannableString类和Html语言来实现. (一)SpannableString类方式 private void setText(TextView t){ String text = t.getText().toString().trim(); SpannableString span = new SpannableString(text); span.setSpan(new ForegroundColorS

java JFrame 设置背景颜色无效的理解

广州疯狂软件教育Java培训,iOS培训分享 在开发Java应用程序时,通常情况下利用JFrame创建窗口.利用JFrame创建的窗口分别包含一个标题.最小化按钮.最大化按钮和关闭按钮 1.在你使用JFrame创建窗体时的情况: 在你直接调用setBackground(Color.red)这个方法后,你的确设置了JFrame的背景颜色,而你看到的却不是直接的JFrame,而是JFrame.getContentPane().而JFrame上的contentPane默认是Color.WHITE的,所

设置状态栏颜色

self.navigationController.navigationBar.barStyle = UIBarStyleBlack;//黑色 self.navigationController.navigationBar.barStyle = UIBarStyleDefault;//白色 设置不同界面状态栏文字颜色不同,可在viewWillAppear及viewWillDisappear中分别设置状态栏颜色

UIColor设置RGB颜色16颜色进制的做法-使用storyboard和代码实现

如何使用代码和storyboard设置 颜色为16进制的? 我们在做真是的项目时常常是美工给我做好 效果图,标尺图我们再来 写UI的,当然这些标尺图中也包括 设置 颜色,一般美工给你的 颜色是 一个  RGB (124,123,124)类似的额 RGB 的颜色或者  FFFFFF  16进制的颜色,我们需要按照美工的要求去设置 这个颜色; 当然 最好的方法是使用storyboard来设置,最简答,最强大,省事! 如何设置? 看图: 如图,给一个label,点击红色框之内的,可以设置任意的 颜色

css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以参考下,很有用的 1 div { 2 scrollbar-face-color: #fcfcfc; 3 scrollbar-highlight-color: #6c6c90; 4 scrollbar-shadow-color: #fcfcfc; 5 scrollbar-3dlight-color: