当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 01:29:56 HTML5

1.绑定事件和添加条件2.为同一个事件注册多个回调3.tag标签4.设置事件优先级5.注册单个事件事件不会自己执行,需要被触发(即只能被事件触发后执行)。查看任何JavaScript代码的核心,您会发现事件是将所有内容结合在一起的原因。下面我学习了一些在数字孪生场景中可视化事件的常用方法。1.绑定事件并添加条件事件添加了条件,只有点击满足条件的数字孪生视觉对象才会触发,无论是已有的Thing对象还是新建的Thing对象都会生效。app.on("click",".Thing",function(ev){console.log("你点击"+ev.object.id);});obj.on("click",".Marker",function(ev){console.log(ev.object.name);});在上面的例子中,当数字孪生可视化对象的后代中有一个Marker对象时,点击它就会触发。将标记对象与全局绑定。绑定后,obj的后代中新创建的Marker也会响应这个事件。2.为同一个事件注册多个回调想象一下,如果有一个模块在点击数字孪生视觉对象时改变对象的颜色,而另一个模块需要在点击对象时放大对象。两个模块是不同人写的,那么怎么注册事件呢?//事件1:obj.on("click",function(ev){ev.object.style.color="#FF0000";});//事件2:obj.on("click",function(ev)){ev.object.scale=[2,2,2];});//卸载obj的所有点击事件obj.off("click");点击obj后会触发这两个事件。但是当使用off()卸载事件时,两个事件会同时卸载。所以我推荐使用[tag]方法。3.Tag如果你取消或者暂停一个事件,你必须知道原来的回调函数,大部分时候会很麻烦。您可以在数字孪生可视化场景中标记每个事件。在删除或者挂起的时候,可以使用标签直接指定你想要的操作的回调。//在模块1中:obj.on("click",function(ev){ev.object.style.color="#FF0000";},"module1");//在模块2中:obj.on("click",function(ev){ev.object.scale=[2,2,2];},"Module2");//取消"Module的事件回调1",不影响"模块2"的回调obj.off("click",null,"Module1");4.设置事件优先级。两者都是点击事件。如果要保证模块2的事件先于模块1触发,需要添加一个参数priority,一般事件的默认优先级是50,设置越大,触发的优先级越高。//模块1:obj.on("click",function(ev){ev.object.style.color="#FF0000";},"模块1");//模块2:obj.on("click",function(ev){ev.object.scale=[2,2,2];},"模块2",51);5.注册单个事件在数字孪生可视化场景中,如果需要一个事件,只执行一次,需要卸载,可以使用one接口代替on,参数同on。提供优先级的能力://下面的例子中,为每一层都注册了一个EnterLevel事件,即每一层第一次进入时,都会响应app.one(THING.EventType.EnterLevel,'.Floor',function(ev){console.log(ev.object.id);})//如果只有一个楼层注册如下varfloor=app.query('.Floor')[0];floor.one(THING.EventType.EnterLevel,function(ev){console.log(ev.object.id);})——————————————————————数字孪生可视化:https://www.thingjs.com/