目录

基础
高级应用
  • xBIM 综合使用案例与 ASP.NET MVC 集成（一）
  • xBIM 综合使用案例与 ASP.NET MVC 集成（二）
  • xBIM 综合使用案例与 ASP.NET MVC 集成（三）

本次我们探讨模型颜色操作，正如您已经注意到的模型在默认情况下具有合理的图形表示形式。这是从 IFC 模型, 它应该在所有的工具看起来相同, 它应该看起来像在您或您的用户的创作环境。但是，有时能够对这种表示进行修改以向用户报告某种结果 (分类, 错误报告, 冲突检测等) 非常重要。

我们将使用在HTML 元素的onclick 属性中定义的Javascript函数使用难看的代码，这是不推荐的做法，但为了清晰和简单起见，鼓励您遵循这些准则来 编写可持续和清晰的Web应用程序。

首先有必要定义自己的风格，有简单的函数 defineStyle()来做到这一点。您最多可以定义224种样式。我们将在以下代码中为每种产品类型定义新颜色：

  1. <button onclick="Recolour()">按类型重新着色</button>
  2. <button onclick="if (viewer) viewer.resetStyles();">重置</button>
  3. <script type="text/javascript">
  4.     function Recolour() {
  5.         if (!viewer) return;
  6.         var index = 0;
  7.         for (var i in xProductType) {
  8.             var type = xProductType[i];
  9.             var colour = [Math.random() * 255, Math.random() * 255, Math.random() * 255, 255];
  10.             viewer.defineStyle(index, colour);
  11.             viewer.setStyle(index, type);
  12.             index++;
  13.         }
  14.     };
  15. </script>

您可以根据需要扩展此示例。只需定义0 - 224种颜色样式，并将其设置为产品或产品类型的覆盖样式。如果您想将样式重置为其默认使用的resetStyles（）函数。

还有一个视觉特征，那就是突出显示。你可以把它看作是一个选择，但这样做并不是太好。它将所有最终的选择逻辑留给你。这只是一种视觉表现。

  1. <select id="cmbSelection">
  2.     <option value="noAction">无</option>
  3.     <option value="select">选择</option>
  4. </select>
  5. <button onclick="if (viewer) viewer.resetStates()">重置</button>
  6. <script type="text/javascript">
  7.     function initHighlighting() {
  8.         viewer.on('pick', function (args) {
  9.             var cmb = document.getElementById('cmbSelection');
  10.             var option = cmb.value;
  11.             switch (option) {
  12.                 case 'select':
  13.                     viewer.setState(xState.HIGHLIGHTED, [args.id]);
  14.                     break;
  15.                 case 'hide':
  16.                     viewer.setState(xState.HIDDEN, [args.id]);
  17.                     break;
  18.                 default:
  19.                     break;
  20.             }
  21.         });
  22.     };
  23. </script>

这种方法的好处在于突出显示与其他视觉外观是分开的。您不能同时突出显示和隐藏产品，但这是有道理的。重要的是您可以显示分析结果并同时进行选择。如果你放弃选择，你仍然有一个有效的结果表示。您通常可以以任何方式组合样式和状态。

整体的HTML 代码 如下：

  1.  <link href="styles/xviewer-styles.css" rel="stylesheet" />
  2.  <script src="scripts/xbim-viewer.debug.bundle.js"></script>
  1. <body>
  2.     <div id="main">
  3.         <div>
  4.             <div class="xviewer-control">
  5.                 <button onclick="Recolour()">按类型重新着色</button>
  6.                 <button onclick="if (viewer) viewer.resetStyles();">重置样式</button>
  7.                 <script type="text/javascript">
  8.                     function Recolour() {
  9.                         if (!viewer) return;
  10.                         var index = 0;
  11.                         for (var i in xProductType) {
  12.                             var type = xProductType[i];
  13.                             var colour = [Math.random() * 255, Math.random() * 255, Math.random() * 255, 255];
  14.                             viewer.defineStyle(index, colour);
  15.                             viewer.setStyle(index, type);
  16.                             index++;
  17.                         }
  18.                     };
  19.                 </script>
  20.             </div>
  21.             <div class="xviewer-control">
  22.                  选择操作:
  23.                 <select id="cmbSelection">
  24.                     <option value="noAction">无</option>
  25.                     <option value="select">选择</option>
  26.                     <option value="hide">隐藏</option>
  27.                 </select>
  28.                 <button onclick="if (viewer) viewer.resetStates()">重置</button>
  29.                 <script type="text/javascript">
  30.                     function initHighlighting() {
  31.                         viewer.on('pick', function (args) {
  32.                             var cmb = document.getElementById('cmbSelection');
  33.                             var option = cmb.value;
  34.                             switch (option) {
  35.                                 case 'select':
  36.                                     viewer.setState(xState.HIGHLIGHTED, [args.id]);
  37.                                     break;
  38.                                 case 'hide':
  39.                                     viewer.setState(xState.HIDDEN, [args.id]);
  40.                                     break;
  41.                                 default:
  42.                                     break;
  43.                             }
  44.                         });
  45.                     };
  46.                 </script>
  47.             </div>
  48.         </div>
  49.  
  50.         <canvas id="viewer" width="500" height="300"></canvas>
  51.         <div>
  52.            您选择产品的编号: <span id="productId">model</span>.
  53.         </div>
  54.         <div id="errors"></div>
  55.  
  56.         <script type="text/javascript">
  57.                 //检查
  58.                 var check = xViewer.check();
  59.                 var viewer = null;
  60.                 var pickedId = null;
  61.                 if (check.noErrors) {
  62.                     viewer = new xViewer('viewer');
  63.                     viewer.on('loaded', function () {
  64.                         initHighlighting();
  65.                         viewer.start();
  66.                     });
  67.  
  68.                     viewer.on('error', function (arg) {
  69.                         var container = document.getElementById('errors');
  70.                         if (container) {
  71.                             //相关的错误
  72.                             container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre> <br />" + container.innerHTML;
  73.                         }
  74.                     });
  75.  
  76.                     viewer.on('pick', function (args) {
  77.                         var id = args.id;
  78.                         var span = document.getElementById('productId');
  79.                         if (span) {
  80.                             span.innerHTML = id ? id : 'model';
  81.                         }
  82.  
  83.                     });
  84.                     viewer.load('data/SampleHouse.wexbim');
  85.                 }
  86.                 else {
  87.                     var msg = document.getElementById('errors');
  88.                     for (var i in check.errors) {
  89.                         var error = check.errors[i];
  90.                         msg.innerHTML += "<pre style='color: red;'>" + error + "</pre> <br />";
  91.                     }
  92.                 }
  93.         </script>
  94.  
  95.     </div>

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

  1. xBIM 基础13 WeXplorer 设置模型颜色

    系列目录    [已更新最新开发文章,点击查看详细]  默认情况下模型具有合理的图形表示.这是从IFC模型中获取的,它应该在所有工具中看起来相同,它应该与您或您的用户的创作环境中的相同.但有时候能够改 ...

  2. xBIM WeXplorer

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  3. xBIM WeXplorer xViewer 基本应用

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  4. xBIM WeXplorer xViewer 浏览器检查

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  5. xBIM WeXplorer xViewer的导航，相机、剖切、隐藏 等操作

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...

  6. xBIM 基本的模型操作

    目录 xBIM 应用与学习 (一) xBIM 应用与学习 (二) xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 x ...

  7. 【代码笔记】iOS-UITextField设置placeholder颜色

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  8. ubuntu 终端设置（颜色与长路径）

    Linux给人最大的享受就是可以根据个人喜好去定制令自己舒服的系统配置,像终端颜色的设置就是一个典型的例子. 图1 系统默认状态下的终端显示     在没有经过自定义配置的终端下工作久了,难免容易疲劳 ...

  9. Pyqt 设置 背景颜色和背景图片、 QPalette 调色板 与QPainter 画板区别 、 不规则图片

    设置 背景颜色和背景图片 首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...

随机推荐

  1. 利用vanitygen生成比特币个性地址的教程

      比特币怎么生成地址?大家都知道比特币地址都是以1开头的一串乱码,很多朋友会新建过一排地址然后在里面挑选,下面小编为大家分享下比特币生成个性地址方法. 其实就是使用vanitygen软件来生成个性化 ...

  2. python3 第二章 - 第一个程序

    1､安装 打开官网 https://www.python.org/downloads/ 下载python3.6.4 如果你是windows＼mac电脑,直接双击安装包,一路next即可,如果你是lin ...

  3. python_语法糖_装饰器

    什么是高阶函数? -- 把函数名当做参数传给另外一个函数,在另外一个函数中通过参数调用执行 #!/usr/bin/python3 __author__ = 'beimenchuixue' __blog ...

  4. javaweb后台转码

    为什么需要转码? 客户端向服务器发送请求的四种情况:1.URL方式直接访问;2.页面链接(属于get请求);3.表单get提交;4.表单post提交 1.url(url和页面链接):各大浏览器.各个操 ...

  5. 本地计算机上的OracleOraDb10g_home1TNSListener服务启动后又停止了..........解决办法

    方法1.直接修改 listener.ora 我机器上的路径是: D:/Oracle/product/10.2.0/db_1/NETWORK/ADMIN/listener.ora 修改其中的 HOST ...

  6. 重定向stdin stdout stderr |

    在Linux下,当一个用户进程被创建的时候,系统会自动为该进程创建三个数据 流,也就是题目中所提到的这三个.那么什么是数据流呢(stream)? 我们知道,一个程序要运行,需要有输入.输出,如果出错, ...

  7. MyCat 入门：漫谈 MyCat 配置系统

    文章首发于[博客园-陈树义],点击跳转到原文<MyCat 入门:漫谈 MyCat 配置系统> 上篇文章<MyCat 启蒙:分布式系统的数据库架构演变>中,我们通过一个项目从零到 ...

  8. Lambda表达式详解 （转）

    前言 1.天真热,程序员活着不易,星期天,也要顶着火辣辣的太阳,总结这些东西. 2.夸夸lambda吧:简化了匿名委托的使用,让你让代码更加简洁,优雅.据说它是微软自C#1.0后新增的最重要的功能之一 ...

  9. Linux中变量#,@,0,1,2,*,$$,$?的意思

    $# 是传给脚本的参数个数 $0 是脚本本身的名字 $1 是传递给该shell脚本的第一个参数 $2 是传递给该shell脚本的第二个参数 $@ 是传给脚本的所有参数的列表 $* 是以一个单字符串显示 ...

  10. 刚买个炼狱蝰蛇1800dpi的下完驱动提示没有发现鼠标

    2017-02-19补充:可以下载下面的程序 ,也可以访问 http://cn.razerzone.com/synapse/  下载雷云 也可解决问题 ------------------------ ...