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

随机推荐

Django_xadmin_应用外键搜索功能错误
问题: 当我在给某一张表加上外键搜索的时候,会出现 TypeError: Related Field got invalid lookup: icontains 问题原因: a 表关联 b表,也就是说 ...
CSS学习（一）
/*</br> * color</br> * background-color background-image background-repeat background-po ...
判断具有某个属性js、jQuery
if(!rr.classList.contains('invalid')){ updateCount(i,-1);//更新tab数量 } /*if(!$(rr).hasClass('invalid') ...
在Tomcat中采用基于表单的安全验证
.概述 (1)基于表单的验证基于From的安全认证可以通过TomcatServer对Form表单中所提供的数据进行验证,基于表单的验证使系统开发者可以自定义用户的登陆页面和报错页面.这种验证方法 ...
php加入环境变量
一.配置变量右击计算机-属性-高级系统设置-环境变量-系统变量-双击path,编辑,将php的文件夹路径添加到后面,我是:D:\wamp64\bin\php\php5.6.25 二.测试当没有加入 ...
PHP读取XML文件
xml主键被json取代,大概了解一下就OK了简要: 加载xml文件:$xml = simplexml_load_file('sa.xml');//$xml是一个对象读取节点:echo $xml- ...
ios中pch文件的创建与配置
PCH文件(Precompile Prefix Header File),也就是预编译头文件,其作用就是,方便你一次性导入在多个文件中同时用到的头文件.宏或者URL地址等(全局使用),可以有效的帮你 ...
squid安装及运行指南
squid安装及运行指南 0. What is squid Squid是一个高性能的代理缓存服务器,Squid支持FTP.gopher.HTTPS和HTTP协议.和一般的代理缓存软件不同,Squid用 ...
C#中的out参数/ref参数/params可变参数
out参数: out关键字通过引用来传递参数,在定义方法和调用方法的时候都必须使用out关键字简单来讲out可以用来返回多个参数类型. static void Main(string[] args ...
mysql将查询出来的一列数据拼装成一个字符串
使用GROUP_CONCAT函数. SELECT GROUP_CONCAT(查询的字段 separator ',') FROM table

xBIM WeXplorer 设置模型颜色

目录

基础

高级应用

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

随机推荐

热门专题