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

栏目: 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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创业就是要细分垄断

创业就是要细分垄断

李开复、汪华、傅盛 / 文化发展出版社 / 2017-5-1 / CNY 45.00

对各方面资源极为有限的创业公司而言,想在激烈的市场竞争中站立下来的第一步是:成为细分市场的垄断者。不管是资本还是尖端人才,追逐的永远是行业里尖端的企业,第二名毫无意义。 首先,要精准定位潜在市场。这个市场的需求仍没有被满足,并且潜力巨大。其次,抓住时代和行业的红利,通过高速增长实现“小垄断”,抢滩登陆。最后,在细分领域里建立起自己的竞争壁垒,应对巨头和竞争对手的复制,去扩展更大的市场,从而扩......一起来看看 《创业就是要细分垄断》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具