Question

jQuery或Javascript问题：判断鼠标坐标是否在指定范围内

在鼠标触发Click事件时，取得鼠标坐标(X,Y)，然后通过与图形的顶点数据判断鼠标的位置是否在图形范围内。请问该怎么做？用jQuery或Javascript皆可。

表达能力太好，如图片所示：由于HTML都是矩形的，所以我用灰色来表示矩形。而红色就是不规则图形。我想鼠标在红色区域内点击就返回true，在红色区域以外点击就返回false。

Answer 1

// 保证点的数组是以顺时针保存
function pointInArea(pt, pts) {
    pts = pts.slice();
    pts.push(pts[0]); // 连接最后一边
    for (var i=1; i<pts.length; ++i) {
        var p0 = pts[i-1];
        var p1 = pts[i];
        var dx = p1.x-p0.x;
        var dy = p1.y-p0.y;
        if (dx == 0) {
            if (dy > 0 && pt.x > p0.x) {
                return false;
            }
            if (dy <0 && pt.x < p0.x) {
                return false;
            }
        }
        var y = dy/dx*(pt.x-p0.x)+p0.y;
        if (dx > 0 && pt.y < y) {
            return false;
        }
        if (dx <0 && pt.y > y) {
            return false;
        }
    }
    return true;
}

追问

请问PT是不是鼠标的X,Y坐标数组？PTS是图形的各个顶点数组？
我看得不是很懂，能写个实例吗？

追答

pt：点，有xy坐标值；pts：区域顶点坐标数组。
调用示例：
var isInArea = pointInArea({x:100, y:50}, [{x:0, y:0}, {x:100, y:0}, {x:200, y:100}, {x:100, y:100}]);

追问

这个函数最多支持多少个顶点XY组？

追答

3个（包含）以上，只要是一个闭合的多边形即可。

追问

有什么工具或方法，能计算出一个多边形的各个顶点吗？函数能用，但我用html的map来搞出的顶点貌似不对还是什么。

Answer 2

你好 给你个链接 里边基本符合你的需求 不过你要好好看看人家是如何做的 Good luck !http://jsfiddle.net/66YsR/

Answer 3

20RMB帮你写