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 6.3 64位下MySQL5.1.54源码安装配置详解
安装环境:CentOS 6.3 64位一:先安装依赖包(不然配置的时候会报错的!) yum -y install ncurses* libtermcap* 新建mysql用户 [root@clien ...
反应堆模式(reactor)
在提到高性能服务器编程的时候肯定有听过reactor模式,如果只是简单的写一个服务器和客户端建立连接的程序来熟悉一下使用socket函数编程,一般这种情况都是同步方式实现的,服务器阻塞等待客户端的连接 ...
计算机改名引发的ORA
近期上班时,由于开机时老是提示" 局域网出现计算机重名冲突",于是把计算机名字给改了,从PC2010081312zeo改为了CXBIKKKKKKK,结果第二天来的时候,用PL/SQ ...
jQuery-niceScroll滚动条错位问题
虽然niceScroll插件很好用,毕竟它不依赖css,只是单纯的js就可以设置出好看的滚动条了. 最近在项目中使用到niceScroll,而且在表格里有横滚动条,竖滚动条时很容易错位,就是滚动条会悬 ...
nodejs模块引用
模块的引用是后端语言非常重要的一部分,那么在nodejs中,如何做到这一点呢. 在引用其他模块时,常用的就是两种方法:exports,module.exports. 接下来,我们写一个demo来分辨其 ...
理解javascript模块化（转）
模块化是一个通用的编程最佳实践.程序的模块化使我们可以更方便地使用别人的代码,想要什么功能,就加载什么模块,从而提高代码的利用效率,增加开发速度. 模块就像积木,有了它,我们可以搭出各种各种功能样式的 ...
使用postMessage实现跨域解决'Failed to execute 'postMessage' on 'DOMWindow''
使用iframe+postMessage解决跨域问题,首先来过一遍其中的原理咯原理: 发送方使用postMessage方法向接收方推送消息,第一个参数为推送的内容,第二个参数是允许被访问的域名: 接 ...
linux修改TCP最大连接数
环境操作系统: oracle-linux7.3 修改系统支持的最大TCP连接最大tcp连接数和系统允许打开的最大文件数,用户允许打开的最大文件数,TCP网络连接可用的端口范围有关,取上述的最小值: ...
spring之p命名空间注入
<bean id="personId" class="com.itheima.f_xml.c_p.Person" p:pname="禹太璞&qu ...
linux shell 中的 2>&1 用法说明
linux中有三种标准输入输出,分别是 STDIN,STDOUT,STDERR,对应的数字是 0,1,2. STDIN 是标准输入,默认从键盘读取信息: STDOUT 是标准输出,默认将输出结果输出至 ...

xBIM WeXplorer 设置模型颜色

目录

基础

高级应用

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

随机推荐

热门专题