xBIM WeXplorer 设置模型颜色

本次我们探讨模型颜色操作，正如您已经注意到的模型在默认情况下具有合理的图形表示形式。这是从 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 设置模型颜色的更多相关文章

xBIM 基础13 WeXplorer 设置模型颜色
系列目录 [已更新最新开发文章,点击查看详细] 默认情况下模型具有合理的图形表示.这是从IFC模型中获取的,它应该在所有工具中看起来相同,它应该与您或您的用户的创作环境中的相同.但有时候能够改 ...
xBIM WeXplorer
目录基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...
xBIM WeXplorer xViewer 基本应用
目录基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...
xBIM WeXplorer xViewer 浏览器检查
目录基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...
xBIM WeXplorer xViewer的导航，相机、剖切、隐藏等操作
目录基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...
xBIM 基本的模型操作
目录 xBIM 应用与学习 (一) xBIM 应用与学习 (二) xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 x ...
【代码笔记】iOS-UITextField设置placeholder颜色
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
ubuntu 终端设置（颜色与长路径）
Linux给人最大的享受就是可以根据个人喜好去定制令自己舒服的系统配置,像终端颜色的设置就是一个典型的例子. 图1 系统默认状态下的终端显示在没有经过自定义配置的终端下工作久了,难免容易疲劳 ...
Pyqt 设置背景颜色和背景图片、 QPalette 调色板与QPainter 画板区别、不规则图片
设置背景颜色和背景图片首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...

随机推荐

Centos硬盘IO性能检测命令iostat[转]
Centos硬盘IO性能检测命令iostat[转] 在Linux下频繁存取文件后,物理内存会很快被用光,当程序结束后,内存不会被正常释放,而是一直作为caching.这个问题,貌似有不少人在问,不过都 ...
JavaScript ECMAScript版本介绍
1. 介绍 1.1 什么是ECMAScript ECMAScript,简称ES,是由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers ...
elasticsearch的集中常见操作
1.引入dependency <dependency> <groupId>org.springframework.data</groupId> <artifa ...
python 控制台颜色
python_控制台输出带颜色的文字方法控制台输出带颜色的文字方法: 在python开发的过程中,经常会遇到需要打印各种信息.海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可 ...
Android ui 透明度设置
格式如#00FFFFFF,前两位代表不透明度的十六进制.00表示完全透明,FF就是全不透明.依次递增. <?xml version="1.0" encoding=" ...
js按位运算符及其妙用
大多数语言都提供了按位运算符,恰当的使用按位运算符有时候会取得的很好的效果. 在我看来按位运算符应该有7个: 1.& 按位与 &是二元运算符,它以特定的方式的方式组合操作数中对应的位, ...
【转】高精度GPS测量中框架基准的统一
一.地面基准点的坐标基准转换一般情况下,我们可以从IERS或IGS等机构获取最新的站坐标和速度场,这些站坐标和速度场是在某一特定基准框架和历元下的坐标值,若要提供高精度GPS网的分析使用,还需要作框 ...
Codeforces C. Classroom Watch
C. Classroom Watch time limit per test 1 second memory limit per test 512 megabytes input standard i ...
CentOS下内存使用率查看
freetotal used free shared buffers cachedMem: 1815340 1628680 ...
使用zii.widgets.CDetailView显示内容
Yii里的CDetailView可以用来显示详细内容,有时会遇到显示的html内容是被转义过的,也就是原本是要显示html样式的,结果显示出来的内容却是把html当作普通文本了. 先看一个CDetai ...

xBIM WeXplorer 设置模型颜色

目录

基础

高级应用

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

随机推荐

热门专题