判断用户点击是否在指定区域内

Enlightenment 发布于2019-08-26 13:33 / 1325人阅读

摘要：近日在地图开发中遇到需要高度显示指定区域的需求，图形画出来了，点击事件却成为一大难题，在中是没有点击事件的，只能通过点击区域来判断是否点击了对象本来如果是正正经经的矩形，判断点击也不是什么难事，偏偏地图就是带着倾斜角度这样就没办法简单的通过

近日在地图开发中遇到需要高度显示指定区域的需求，图形画出来了，点击事件却成为一大难题，在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  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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109054.html

判断鼠标点击的位置是否在某个div区域内

摘要：判断鼠标点击的位置是否在某个区域内，可用在右键菜单的显示与隐藏等 //判断鼠标点击的位置是否在某个div区域内，可用在右键菜单的显示与隐藏等 function isInDiv(event,divId){ var div = document.getElementById(divId) var x=event.clientX var y=event.clientY...

xi4oh4o 2019-08-26 13:54 评论0 收藏0
前端常用代码片段(五)

摘要：当运行时，如果不为，则将超时函数推送到事件队列，并且函数退出，从而使调用堆栈清零。因此，该方法从头到尾不经过直接递归调用即可处理，因此调用堆栈保持清晰，无论迭代次数如何。前端常用代码片段(一) 点这里前端常用代码片段(二) 点这里前端常用代码片段(三) 点这里前端常用代码片段(四) 点这里 1.tap事件点透问题？问题点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触...

MoAir 2019-08-23 14:41 评论0 收藏0
前端常用动画效果和功能控制

摘要：原理分析使用延迟加载效果的网站，一般也会使用一个默认的图片来占位，比如优酷和。这样可以防止用户在滚动过快时造成可能出现的页面结构混乱和图像一时加载不出来出现的。针对这一功能，也有一个常用的插件。图片延迟加载许多网站的图片是在下拉滚动条时才加载，而此效果通常是用jQuery的lazyLoad或scrollLoading插件实现的。它可以延迟加载长页面中的图片。在浏览器可视区域外的图片...

A Loity 2019-08-28 18:09 评论0 收藏0
前端常用动画效果和功能控制

摘要：原理分析使用延迟加载效果的网站，一般也会使用一个默认的图片来占位，比如优酷和。这样可以防止用户在滚动过快时造成可能出现的页面结构混乱和图像一时加载不出来出现的。针对这一功能，也有一个常用的插件。图片延迟加载许多网站的图片是在下拉滚动条时才加载，而此效果通常是用jQuery的lazyLoad或scrollLoading插件实现的。它可以延迟加载长页面中的图片。在浏览器可视区域外的图片...

luck 2019-08-21 10:31 评论0 收藏0