判断用户点击是否在指定区域内
栏目: JavaScript · 发布时间: 5年前
内容简介:首先如果地图没有倾斜判断方式应该是x>左上角(a)的x坐标,小于右上角(b)的x坐标,y>右下角(c)的y坐标,小于右上角(b)的y坐标.这里的坐标系为屏幕坐标系,X轴向右为正,Y轴向下为正。获取到的区域远远超过了 实际可点击区域
近日在地图开发中遇到需要高度显示指定区域的需求,图形画出来了,点击事件却成为一大难题,在canvas中是没有dom点击事件的,只能通过点击区域来判断是否点击了对象.本来如果是正正经经的矩形,判断点击也不是什么难事,偏偏地图就是带着倾斜角度.这样就没办法简单的通过x,y坐标来判断区域问题,需要一个算法.
首先如果地图没有倾斜判断方式应该是x>左上角(a)的x坐标,小于右上角(b)的x坐标,y>右下角(c)的y坐标,小于右上角(b)的y坐标.这里的坐标系为屏幕坐标系,X轴向右为正,Y轴向下为正。
if (x >= a.x && x <= b.x && y >= c.y && y <= b.y){ //alert(true) }
获取到的区域远远超过了 实际可点击区域
我们需要把这个区域拆分为四个小区域,判断坐标在不在可点击区域内即可,要用到三角函数中的正切tan
so...
y/x < tan(deg)就是在区域内
能够获取到的鼠标点击的坐标(x,y),矩形四个点坐标(a,b,c,d),地图倾斜角度deg
调用方式应该是:
checkClickArea(x,y,a,b,c,d,deg)
思路有了代码便水到渠成
function checkClickArea(x,y,a,b,c,d,deg) { deg = 2 *Math.PI / 360 * deg; var pi = Math.tan(deg); if(x < a.x || x > c.x || y < b.y || y > d.y){ return false; }else if(x < b.x && y <a.y){ if((a.y-y)/(x-a.x) > pi){ return false } return true }else if(x > b.x && y < c.y){ if((x-b.x) / (y-b.y) > pi){ return false } return true }else if(x > d.x && y > c.y){ if((d.y-y)/(x-d.x) < pi){ return false } return true }else if(x < d.x && y > a.y){ if((x-a.x)/(y-a.y) < pi){ return false } return true }else{ return true } }
其中Math.tan方法是个大坑,需要转换为 2 Math.PI / 360 deg
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- awk 获取指定列的内容进行判断输出
- c# – “SMTP主机未指定” – 但是是否指定?
- 运维安全 | 如何限制指定账户不能SSH只能SFTP在指定目录
- Zabbix监控指定端口
- Android指定专用APN
- iOS 指定初始化方法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。