请选择 进入手机版 | 继续访问电脑版
分享
查看: 2912|回复: 0

[分享] 从零开始学习3D可视化之事件的常用方法

[复制链接]

从零开始学习3D可视化之事件的常用方法

发表于 2021-7-1 14:28:34 来自 分享 阅读模式 倒序浏览
zzv_icon2912 zzr_icon0 查看全部
1、 绑定事件并添加条件

2、 同一个事件注册多个回调

3、 tag 标签

4、 设置事件优先级

5、 注册单次事件

事件不会自己执行,需要触发(即事件被触发之后才可执行)。审视任何JavaScript代码的核心,你会发现正是事件是把所有东西融合在一起。下面我学习了一些在数字孪生可视化场景中事件的常用方法。

从零开始学习3D可视化之事件的常用方法



1、 绑定事件并添加条件
事件添加了条件,只有在符合该条件的数字孪生可视化物体上 click 才会触发,无论是已经存在的 Thing 对象,还是后面新创建的 Thing 对象都会生效。

  1. app.on("click", ".Thing", function(ev) {
  2. console.log("you click " + ev.object.id);
  3. });
  4. obj.on("click", ".Marker", function(ev) {
  5. console.log(ev.object.name);
  6. });
复制代码


上面的例子,当这个数字孪生可视化物体子孙里有 Marker 物体,当它被点击就会触发。同全局绑定 Marker 物体,绑定后 obj 的子孙里新创建的 Marker 也响应这个事件。

2、 同一个事件注册多个回调
试想一下,如果有一个模块在数字孪生可视化物体 click 时,改变物体颜色,另外一个模块需要在物体 click 时,放大物体。两个模块又是不同人写的,那该如何注册事件呢?

  1. // 事件1:
  2. obj.on("click", function(ev) {
  3. ev.object.style.color = "#FF0000";
  4. });
  5. // 事件2:
  6. obj.on("click", function(ev) {
  7. ev.object.scale = [2, 2, 2];
  8. });
  9. // 卸载 obj 全部的 click 事件
  10. obj.off("click");
复制代码


这两个事件,都会在 obj 被点击后触发。但使用 off() 卸载事件时,两个事件都会同时被卸载。因此我更推荐使用[tag]的方式。

3、 tag 标签
如果取消或者暂停事件,都要知道原回调函数,在大部分时候会比较麻烦,可以给数字孪生可视化场景中每个事件打上 tag,在删除或者暂停时,可用 tag 直接指定你要操作的回调。

  1. //模块1中:
  2. obj.on("click",function(ev) {
  3. ev.object.style.color = "#FF0000";
  4. },"模块1");

  5. //模块2中:
  6. obj.on("click",function(ev) {
  7. ev.object.scale = [2, 2, 2];
  8. },"模块2");
  9. //取消"模块1"的事件回调,不影响“模块2”的回调
  10. obj.off("click",null ,"模块1");
复制代码


4、 设置事件优先级
两个都是 click 事件,如果希望保证模块 2 的事件先于模块 1 触发,则需要添加一个参数 priority,一般事件默认的优先级是 50,设置的越大,越优先触发。

  1. //模块1:
  2. obj.on("click",function(ev) {
  3. ev.object.style.color = "#FF0000";
  4. },"模块1");

  5. //模块2:
  6. obj.on("click",function(ev) {
  7. ev.object.scale = [2, 2, 2];
  8. },"模块2",51);
复制代码


5、 注册单次事件
在数字孪生可视化场景中如果需要一个事件只执行一次,就需要卸载掉,你可以使用 one 这个接口代替 on,参数和 on 是一样的。

提供 priority 的能力:

  1. // 下例中是给每个楼层的注册了一次 EnterLevel 事件,即 每个楼层第一次进入时 都会响应
  2. app.one(THING.EventType.EnterLevel, '.Floor', function (ev) {
  3. console.log(ev.object.id);
  4. })

  5. // 如果只给某个楼层注册 如下
  6. var floor = app.query('.Floor')[0];
  7. floor.one(THING.EventType.EnterLevel, function (ev) {
  8. console.log(ev.object.id);
  9. })
复制代码


—————————————————

数字孪生可视化:https://www.thingjs.com/


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

本版积分规则

130700ppkpl8x3t7tt1b1t