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

随机推荐

mydate97设置时间
1.引入包 2.页面引入 <script type="text/javascript" src="${pageContext.request.contextPath ...
自己模拟的一个简单的tomcat
servlet容器的职责总的来说,一个全功能的servlet容器会为servlet的每个HTTP请求做下面的一些工作: 1,当第一次调用servlet的时候,加载该servlet类并调用servle ...
解决eclipse maven工程中src/main/resources目录下创建的文件夹所显示样式不是文件夹，而是"包"图标样式的问题
参考:http://blog.csdn.net/luwei42768/article/details/72268246 eclipse项目中创建maven项目后,有时在执行命令maven update ...
mysql5.7安装配置,常用命令,常见问题
1.安装配置参考:http://www.cnblogs.com/Fiona20170420/p/6738185.html 1. 下载 2. 解压缩 3. 添加path环境变量,路径指向mysql所在 ...
转 intValue()的用法
intValue()是java.lang.Number类的方法,Number是一个抽象类.Java中所有的数值类都继承它. 不单是Integer有intValue方法,Double,Long等都有此方 ...
git常用命令，学git代码管理
下面是我整理的常用 Git 命令清单.几个专用名词的译名如下. Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote:远程仓库一. ...
看得懂的区块链，看不清的ICO人心
比特币又开始下跌了,是狂欢尽头还是又一波调整,无从得知,背后的乱象会让监管者继续心烦,而这乱象对我来说,有时候会有些心寒. 你说我怎么可能想到,我一个写程序的人,突然有一天会发现,朋友圈里有一些搞技术 ...
isFile() exists() isDirectory()的区别
isFile()public boolean isFile()测试此抽象路径名表示的文件是否是一个标准文.如果该文件不是一个目录,并且满足其他与系统有关的标准,那么该文件是标准文件.由Java应用程序 ...
排序算法之low B三人组
排序low B三人组列表排序:将无序列表变成有充列表应用场景:各种榜单,各种表格,给二分法排序使用,给其他算法使用输入无序列表,输出有序列表(升序或降序) 排序low B三人组 1. 冒泡排序 ...
解决Bug:Size of a request header field exceeds server limit
用了cms 发现这玩意真不好,老是有各种奇芭的问题跳出来有时浏览网页时会出现 Bad Request Your browser sent a request that this server cou ...

xBIM WeXplorer 设置模型颜色

目录

基础

高级应用

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

随机推荐

热门专题