请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 353|回复: 0

[分享] ThingJS官方示例change事务的5个新组件

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2020-9-30 19:47:05 | 显示全部楼层 |阅读模式

change事务触发机会按照表单元素type与用户交互决议。ThingJS官方示例change事务的5个新组件,展现轻松的3D开辟才能!

若何连系2D图形面板和js语法来做3D开辟?ThingJS做个好树模,教你动手开辟分歧物体的温度、雾效和iframe页面。官方新推出change事务的功用,对应各类3D结果元素的值的变化,方便在GUI(图形界面)手动操纵,间接天生js代码。

Change事务指代一系列用于改变场景元素的界面组件,都有哪些组件呢?比如string组件、复选框组件、布尔开关组件、单选框组件、iframe组件,都可以逐一加入开辟序列。

下面就来逐一剖析一下。首先要绑定界面组件数据,再建立面板和增加相关组件,留意在建立进程中会经过一些色彩大概动画结果来静态显现变化,包括变色、切换等。


建立面板

  1. // 用于界面组件数据绑定
  2. var dataObj = {
  3. temperature: '30',
  4. checkbox: {
  5. 'car01': true,
  6. 'car02': false,
  7. 'car03': false,
  8. },
  9. switch1: false,
  10. radio: '首页',
  11. iframe: 'https://www.thingjs.com'
  12. };
  13. // 建立面板
  14. var panel = THING.widget.Panel({
  15. titleText: '面板',
  16. hasTitle: true,
  17. width: '300px'
  18. });
复制代码


增加string组件

官方示例对应温度的变化,经过文本点窜来触发change事务。代码中绑定了beforechange,经过return语句停止当前函数并返回当前温度的值,change事务显现当前温度的返回值,面板中需要输入数字,并勾选所感化的物体工具。

  1. // 增加 String 组件
  2. var temperature = panel.addString(dataObj, 'temperature').isChangeValue(true);
  3. // 绑定 beforeChange 事务
  4. temperature.on('beforeChange', function (ev) {
  5. return confirm('改变温度设备');
  6. })
  7. // 绑定 change 事务
  8. temperature.on('change', function (ev) {
  9. console.log('当前温度为:' + ev);
  10. });
复制代码


增加复选框组件

经过复选框来挑选工具,加入色彩变化,直观显现一个升温大概降温的结果。

  1. // 增加 复选框 组件
  2. var checkbox = panel.add(dataObj, 'checkbox');
  3. for (let i = 0; i < 3; i++) {
  4. checkbox[i].on('beforeChange', function (ev) {
  5. var car = app.query(/car/)[i];
  6. if (ev) {
  7. return confirm('取消 ' + car.name + ' 红色');
  8. }
  9. else {
  10. return confirm(car.name + ' 变红');
  11. }
  12. });
  13. checkbox[i].on('change', function (ev) {
  14. var car = app.query(/car/)[i];
  15. car.style.color = ev ? '#ff0000' : null;
  16. });
  17. }
复制代码


增加布尔开关组件

布尔值是“真” True 或“假” False 中的一个,在3D面板中是翻开与封闭雾效,设备雾效还要斟酌到色彩、间隔等身分。

  1. // 增加 布尔开关 组件
  2. var switch1 = panel.addBoolean(dataObj, 'switch1').caption('雾效');
  3. switch1.on('beforeChange', function (ev) {
  4. if (ev) {
  5. return confirm('肯定封闭雾效吗?');
  6. }
  7. else {
  8. return confirm('肯定翻开雾效吗?');
  9. }
  10. })
  11. switch1.on('change', function (ev) {
  12. if (ev) {
  13. // 设备雾结果
  14. app.fog = { color: '#c4c4c4', near: 0, far: 150 };
  15. }
  16. else {
  17. app.fog = null;
  18. }
  19. })
复制代码


增加单选框组件

用单选框实现切换,经过增加iframe组件,显现切换后的页面。

  1. // 增加 单选框 组件
  2. var radio = panel.addRadio(dataObj, 'radio', ['首页', '教程']);
  3. radio.on('beforeChange', function (ev) {
  4. if (ev == '教程') {
  5. return confirm('iframe 页面将切换到首页');
  6. }
  7. else {
  8. return confirm('iframe 页面将切换到教程');
  9. }
  10. })
  11. radio.on('change', function (ev) {
  12. if (ev === '首页') {
  13. dataObj.iframe = "https://www.thingjs.com"
  14. }
  15. else {
  16. dataObj.iframe = "https://www.thingjs.com/guide/cn/tutorial_Introduce/index.html"
  17. }
  18. })
复制代码


增加iframe组件

  1. // 增加 Iframe 组件
  2. var iframe = panel.addIframe(dataObj, 'iframe').setHeight("400px");
复制代码



ThingJS,轻松具有3D开辟才能!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则