查看: 851|回复: 0

[.NET开发] xBIM WeXplorer 设置模型颜色

发表于 2018-3-22 08:00:01
目录 基础
  • xBIM WeXplorer 简要介绍
  • xBIM WeXplorer xViewer 基本应用
  • xBIM WeXplorer xViewer 浏览器检查
  • xBIM WeXplorer xViewer的导航,相机、剖切、隐藏 等操作
  • xBIM WeXplorer 设置模型颜色
高级应用
  • 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. <canvas id="viewer" width="500" height="300"></canvas>
  50. <div>
  51. 您选择产品的编号: <span id="productId">model</span>.
  52. </div>
  53. <div id="errors"></div>
  54. <script type="text/javascript">
  55. //检查
  56. var check = xViewer.check();
  57. var viewer = null;
  58. var pickedId = null;
  59. if (check.noErrors) {
  60. viewer = new xViewer('viewer');
  61. viewer.on('loaded', function () {
  62. initHighlighting();
  63. viewer.start();
  64. });
  65. viewer.on('error', function (arg) {
  66. var container = document.getElementById('errors');
  67. if (container) {
  68. //相关的错误
  69. container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre> <br />" + container.innerHTML;
  70. }
  71. });
  72. viewer.on('pick', function (args) {
  73. var id = args.id;
  74. var span = document.getElementById('productId');
  75. if (span) {
  76. span.innerHTML = id ? id : 'model';
  77. }
  78. });
  79. viewer.load('data/SampleHouse.wexbim');
  80. }
  81. else {
  82. var msg = document.getElementById('errors');
  83. for (var i in check.errors) {
  84. var error = check.errors[i];
  85. msg.innerHTML += "<pre style='color: red;'>" + error + "</pre> <br />";
  86. }
  87. }
  88. </script>
  89. </div>
复制代码



回复

使用道具 举报