如何基于Angular从.ts获取鼠标响应的屏幕坐标,并传递至.html的Style中

本文介绍了如何在TypeScript中声明public变量,并结合Cesium的鼠标事件监听,实现实时获取屏幕坐标。这些坐标随后被用于更新HTML元素的样式,使其跟随鼠标位置动态变化。通过这种方式,可以创建交互式的网页元素定位效果。
摘要由CSDN通过智能技术生成

首先,我们需要在.ts中申明public变量,然后通过Cesium鼠标事件获取屏幕坐标,赋值给相应public变量。

//声明变量
public screenX:String="";//当前屏幕坐标X
public screenX:String="";//当前屏幕坐标Y

//
//......其它代码
//网上已有大量资料介绍Cesium中hander如何声明
//

//建立鼠标事件,并获取坐标
hander.setInputAction((movement)=>{
   this.screenX=movement.position.x+"px";//此处转为分辨率单位,便于html中的Style设置。当然读者可根据实际需要自定义修改设置。
   this.screenY=movement.position.y+"px";
}
),Cesium.ScreenSpaceEventType.LEFT_CLICK);//鼠标左键点击响应

此时,我们已经获取了鼠标响应的实时屏幕坐标,这时html即可获取坐标变量。

<!--样式设置-->
<div class="test" [ngStyle]="{left:screenX,top:screenY}">
<!--....相关代码-->
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值