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

随机推荐

SerialChart串口示波器的成功调试
2018-01-1601:29:06 深夜更新一波串口示波器! http://t.cn/RQMA3uq 心得体会总之将数据输出设置为","分割的形式即可重点注意事项!!!! m ...
Go_Hello word
与Go相关直接命令有哪些? go get 获取远程包 go run 直接运行程序 go bulid 测试编译 go fmt 格式化代码 go install 编译包文件 ...
javascript 类数组对象
原文:https://segmentfault.com/a/1190000000415572 定义: 拥有length属性,其他属性(索引)为非负整数(对象中的所有会被当做字符串来处理,这里你可以当做 ...
base64_encode与base64_decode
base64_encode 编辑本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! base64_encode() returns 使用 base64 对 data 进行编码. ...
fullpage.js的easing参数怎样配置自定义动画
首先看非官方文档并没有详细的说明怎样去使用easing.js,所以我加的运动属性根本就不起作用, 再看,官方文档 Optionally, when using css3:false, you can ...
input标签的美化
css input checkbox和radio样式美化:http://www.haorooms.com/post/css_mh_ck_radio 自定义 css checkbox 样式 :http ...
【转】C++易混知识点5：实例讲解Public Protected Private作用域，继承的区别和用意
大学生涯,涉及到类的作用域,继承都是用的public 共有继承,当时也没想那么多,觉得共有继承多方便,多简单,反正没有太多的限制,不管是类的成员或者是基类的成员函数都可以访问.没有深究.其实这里面真是 ...
Ajax发送数据
python数据类型之元组、字典、集合
python数据类型元组.字典.集合元组 python的元组与列表类似,不同的是元组是不可变的数据类型.元组使用小括号,列表使用方括号.当元组里只有一个元素是必须要加逗号: >>> ...
基于Vue2写的一个有关美食项目
刚学Vue练习的一个项目使用Vue2+vue-router+vuex+axios+webpack router使用了默认的hash模式引入了高德地图和element-ui 项目地址点击这里演示地 ...

xBIM WeXplorer 设置模型颜色

目录

基础

高级应用

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

随机推荐

热门专题