xBIM WeXplorer 设置模型颜色
目录
基础
- 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种样式。我们将在以下代码中为每种产品类型定义新颜色:
<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>
转载于:https://www.cnblogs.com/w2011/p/8490421.html
xBIM WeXplorer 设置模型颜色相关推荐
- Simulink模型颜色快速设置
Simulink模型颜色快速设置 该小工具可以对simulink模型中不同类型模块进行快速相同颜色设置,以提升模型的可读性.下载链接如下: 链接: https://pan.baidu.com/s/1c ...
- 【OpenGL】十、OpenGL 绘制点 ( 初始化 OpenGL 矩阵 | 设置投影矩阵 | 设置模型视图矩阵 | 绘制点 | 清除缓冲区 | 设置当前颜色值 | 设置点大小 | 绘制点 )
文章目录 一.初始化 OpenGL 矩阵 1.设置投影矩阵 2.设置模型视图矩阵 二.绘制点 1.清除缓冲区 2.设置当前颜色值 3.设置绘制点的大小 4.绘制点 5.将缓冲区绘制到前台 三.部分代码 ...
- flutter基于provider状态管理设置主题颜色、实现简单登录、注册功能---页面+逻辑
一.provider状态管理设置主题颜色 第一步: 安装依赖库 provider: ^4.3.2+3 第二步: 创建共享数据模型 import 'package:flutter/material.da ...
- OsgEarth中设置模型运动路径,并绘制雷达扫描、动态实时绘制运动轨迹、跟随彩带
工程结构 需求 加载机场和飞机 创建飞机历史航迹 设置飞机视角跟随 并设置飞行路径 创建飞机飞行彩带 计算飞机飞行姿态 TrailerCallback.h TrailerCallback.cpp Cr ...
- java设置文本框里字体颜色_swing设置字体颜色
());//设置该容器的布局 container.setBackground(Color.red);//设置字体对话框颜色 testLabel = new JLabel("作者:张旭&quo ...
- Unity3D开发之设置模型显示在UI前面
项目中我们会遇到类似这种需求,弹出一个小UI界面,我们可以在UI界面上看到我们的三维模型.对于广大Unity开发者都知道,unity引擎默认UI渲染在最上层.所以,想要实现这个功能需要我们自己去处理下 ...
- android 设置activity背景图片,给Activity设置背景颜色
为了使得错误提示更加显眼,再用Toast+振动效果之外考虑变换整个activity的背景颜色. 尝试一: activity并没像winform一样直接给个属性来设置,就想获取整个activity的la ...
- android view设置按钮颜色_Android 主题换肤技术方案分析
写在前面 Android TV 电视开发,主题换肤,我感觉有两种层级的方式,一种是 系统级,另一种 是应用级, 我记得很早在 Linux 桌面开发的时候,我们之前的公司在GTK+上也实现了一套换肤UI ...
- 【Qt】使用QPalette设置按钮颜色时,不生效
1.问题描述 在练习QStylePlugin示例时,通过插件将按钮颜色设置为红色,但是没有效果,原因是: 使用QPalette设置按钮颜色时,不生效,代码如下 QPalette.setBrush(QP ...
最新文章
- 地域面试:先来谈谈对MySQL索引的认识?
- 20行python代码的入门级小游戏-用Python设计一个经典小游戏
- 什么是反射?反射的用法?实例说明。
- 【12306图片验证12小时内被破解,验证安全的出路到底在哪?】
- k8s节点亲和性:pod和node的亲和性、硬策略、软策略
- 详解Framework
- linux io测试陈旭,陈旭方案论证及器件选择.doc
- python的应用包括哪些_Python应用领域有哪些?
- java关于hashmap编程题_LeetCode算法题-Design HashMap(Java实现)
- 从0基础学Python:装饰器及练习(基础)
- 为什么腾讯云要自研云原生数据库 CynosDB?
- Mobile game forensics
- 广西民族博物馆真好玩
- linux安装思源字体下载,fedora25安装字体-以思源字体为例 适合中文用户
- 基于正点原子stm32mini板的串行通信原理
- 轻量级神经网络架构综述
- 教案用计算器计算机,用计算器计算教案
- 借记卡、贷记卡叫法的由来
- 移动端名片识别SDK
- 利用QGIS下载地图数据
热门文章
- LPSTR LPCSTR LPWSTR LPCWSTR区别
- What is Type in managed heap?
- android人脸识别源代码,Android自带的人脸识别
- 以下选项不是python打开方式的是-关于文件的打开方式,以下选项中描述正确的是...
- python是通用编程语言吗-2020年,编程语言将不再只属于程序员,尤其是这门语言...
- 怎么进入python官网-Python的安装及简单的使用
- python期末考试题及答案翻译-用 python 解 NOIP 竞赛题
- python打完代码怎么运行-Python的代码是如何去进行运行的?
- python和java一样吗-Python与Java的区别与优劣?
- python好学吗mooc中文网-2020年大学mooc用Python玩转数据作业答案