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

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


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

查看所有标签

猜你喜欢:

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

游戏测试精通

游戏测试精通

舒尔茨 / 周学毛 / 清华大学出版社 / 2007-9 / 48.00元

《游戏测试精通》来自3位在游戏测试领域都有着极其丰富经验的专业人员,是亚马逊“五星级”畅销书,也是国内第一本专业级游戏测试经典之作,不仅内容全面、实例丰富,而且讲解透彻、可读性强,并提供多个资源下载和技术支持站点。现如今,游戏产业发展迅猛,游戏测试已成为游戏产品、游戏软件、游戏程序设计与开发不可或缺的环节。《游戏测试精通》主要揭示了如何将软件测试的专业方法运用到游戏产业中,全面涵盖了游戏测试的基本......一起来看看 《游戏测试精通》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

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

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具