3D多边形区域交互开发之5个注册事件

zoom 3月前 184

前言

如果要在数字场景中划定一个虚拟范围,可以创建多边形区域(圆形、方形、不规则形状),定义范围接口;而创建区域范围并设置了其位置之后,可以针对范围的内容执行很多种操作,从而实现对数字孪生对象更精细的交互控制, 更多demo可以点击这里注册查看!

创建区域范围

ThingJS使用button属性创建区域范围,无论是圆形、方形或者多边形,都需要定义区域的世界坐标,来构成区域形状的点位置,同时加入区域颜色、边框颜色、透明程度,开启拖拽模式,不到15行代码,就能够轻松生成!

	new THING.widget.Button('创建方形区域', function () {
		// 构成多边形的点(取世界坐标系下的坐标)
		var points = [[0, 0, 0], [10, 0, 0], [10, 0, 10], [0, 0, 10]];
		if (region02 != null) return;
		// 创建方形区域
		region02 = app.create({
			type: 'PolygonRegion',
			id: 'polygonRegion02',
			points: points,  // 传入世界坐标系下点坐标
			style: {
				regionColor: '#9F35FF',  // 区域颜色
				lineColor: '#9F35FF',  // 边框颜色
				regionOpacity: 0.3  // 不透明度 (默认是 0.5 半透明)
			},
		})
		region02.draggable = true;  // 开启拖拽
	})

注册事件开发

ThingJS利用鼠标注册事件,包括鼠标移动事件mousemove、鼠标键按下事件mousedown、鼠标键抬起mouseup、鼠标键离开mouseleave、鼠标键划入mouseenter等等5个属性完成以注册时间为主的开发方式。
以创建圆形为示例,鼠标的交互开发更加直观,有效提升开发效率。

拉伸前

拉伸后

从上图可以看到,鼠标的标志在区域内、区域外、区域边缘都是不一样的,区域内可以进行拾取等操作,区域边缘则可以利用鼠标键抬起mouseup进行范围拉伸。
// 注册鼠标划入区域后鼠标键抬起事件
		app.on('mouseup', function (ev) {
			if (ev.button == 0) {
				app.resumeEvent('mousemove', null, '监听鼠标位置事件');
				app.resumeEvent('mouseenter', '.PolygonRegion', '鼠标划入区域事件');
				if(stretchState == true){
					app.off('mousemove', null, '圆形区域拉伸事件');
					$(document.body).css('cursor', 'default');
				}else{
					$(document.body).css('cursor', 'grab');
				}
			}
		}, '鼠标划入区域后鼠标键抬起事件');
	}, '鼠标划入区域事件');
不同的区域范围由一个Button类型的示例表示,其实展现的都是差不多的属性和方法,包括点坐标、style属性和鼠标注册事件,复制创建更简单!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
关于ThingJS
优锘ThingJS平台提供物联网3D可视化组件,让3D开发更轻松!直接Javascript调用3D脚本,基于200个3D开发源码示例,让你全面了解物联网可视化开发逻辑,一站式项目开发服务(场景搭建-3D脚本开发-数据对接-项目部署)更是吸引了20万开发者入驻,成为数字孪生技术创新者!魔豆花花活动ing,欢迎点击进入注册页面>>
最新回复 (0)

你可以在 登录 or 注册 后,对此帖发表评论!

返回