|
change事件触发时机根据表单元素type与用户交互决定。ThingJS官方示例change事件的5个新组件，展示轻松的3D开发能力！ 如何结合2D图形面板和js语法来做3D开发？ThingJS做个好示范，教你着手开发不同物体的温度、雾效和iframe页面。官方新推出change事件的功能，对应各种3D效果元素的值的变化，方便在GUI（图形界面）手动操作，直接生成js代码。 Change事件指代一系列用于改变场景元素的界面组件，都有哪些组件呢？比如string组件、复选框组件、布尔开关组件、单选框组件、iframe组件，都可以一一加入开发序列。 下面就来一一解析一下。首先要绑定界面组件数据，再创建面板和添加相关组件，注意在创建过程中会通过一些颜色或者动画效果来动态呈现变化，包括变色、切换等。
创建面板- // 用于界面组件数据绑定
- var dataObj = {
- temperature: '30',
- checkbox: {
- 'car01': true,
- 'car02': false,
- 'car03': false,
- },
- switch1: false,
- radio: '首页',
- iframe: 'https://www.thingjs.com'
- };
- // 创建面板
- var panel = THING.widget.Panel({
- titleText: '面板',
- hasTitle: true,
- width: '300px'
- });
添加string组件 官方示例对应温度的变化，通过文本修改来触发change事件。代码中绑定了beforechange,通过return语句终止当前函数并返回当前温度的值，change事件显示当前温度的返回值，面板中需要输入数字，并勾选所作用的物体对象。 - // 添加 String 组件
- var temperature = panel.addString(dataObj, 'temperature').isChangeValue(true);
- // 绑定 beforeChange 事件
- temperature.on('beforeChange', function (ev) {
- return confirm('改变温度设置');
- })
- // 绑定 change 事件
- temperature.on('change', function (ev) {
- console.log('当前温度为：' + ev);
- });
添加复选框组件通过复选框来选择对象，加入颜色变化，直观呈现一个升温或者降温的效果。 - // 添加 复选框 组件
- var checkbox = panel.add(dataObj, 'checkbox');
- for (let i = 0; i < 3; i++) {
- checkbox[i].on('beforeChange', function (ev) {
- var car = app.query(/car/)[i];
- if (ev) {
- return confirm('取消 ' + car.name + ' 红色');
- }
- else {
- return confirm(car.name + ' 变红');
- }
- });
- checkbox[i].on('change', function (ev) {
- var car = app.query(/car/)[i];
- car.style.color = ev ? '#ff0000' : null;
- });
- }
添加布尔开关组件布尔值是“真” True 或“假” False 中的一个，在3D面板中是打开与关闭雾效，设置雾效还要考虑到颜色、距离等因素。 - // 添加 布尔开关 组件
- var switch1 = panel.addBoolean(dataObj, 'switch1').caption('雾效');
- switch1.on('beforeChange', function (ev) {
- if (ev) {
- return confirm('确定关闭雾效吗？');
- }
- else {
- return confirm('确定打开雾效吗？');
- }
- })
- switch1.on('change', function (ev) {
- if (ev) {
- // 设置雾效果
- app.fog = { color: '#c4c4c4', near: 0, far: 150 };
- }
- else {
- app.fog = null;
- }
- })
添加单选框组件用单选框实现切换，通过添加iframe组件，呈现切换后的页面。 - // 添加 单选框 组件
- var radio = panel.addRadio(dataObj, 'radio', ['首页', '教程']);
- radio.on('beforeChange', function (ev) {
- if (ev == '教程') {
- return confirm('iframe 页面将切换到首页');
- }
- else {
- return confirm('iframe 页面将切换到教程');
- }
- })
- radio.on('change', function (ev) {
- if (ev === '首页') {
- dataObj.iframe = "https://www.thingjs.com"
- }
- else {
- dataObj.iframe = "https://www.thingjs.com/guide/cn/tutorial_Introduce/index.html"
- }
- })
添加iframe组件- // 添加 Iframe 组件
- var iframe = panel.addIframe(dataObj, 'iframe').setHeight("400px");
ThingJS,轻松拥有3D开发能力！
| 
1453
0
