判断鼠标在 多边形外

判断点在多边形外算法：

 通过改点做一条水平射线：如果与多边形有 偶数个交点则说明点在多边形外，否则点在多边形内。

以下通过一个简单例子：

http://888.qq.com/promote/party/2013/0801_jczq/index.shtml#nogo

var o = {
init: function () {
o.initParty();
this.flag = false; //鼠标位于多边形内
this.pos = 0; //记录位于哪个多边形
this.lastpos = -1;
this.point = {
x: 0,
y: 0
};
this.polygon = [
[
{x: 400, y: 220},
{x: 520, y: 0},
{x: 715, y: 0},
{x: 895, y: 220},
{x: 715, y: 445},
{x: 520, y: 445}
],
[
{x: 0, y: 450},
{x: 120, y: 230},
{x: 375, y: 230},
{x: 500, y: 450},
{x: 375, y: 665},
{x: 120, y: 665}
],
[
{x: 400, y: 675},
{x: 520, y: 455},
{x: 715, y: 455},
{x: 895, y: 675},
{x: 715, y: 895},
{x: 520, y: 895}
],
[
{x: 0, y: 895},
{x: 120, y: 680},
{x: 375, y: 680},
{x: 500, y: 895},
{x: 375, y: 1115},
{x: 120, y: 1115}
]
];
o.getLeftMoney();
o.bindEvent();
},
//鼠标划过效果
hoverEffect: function (flag) {
if (flag) { //移入
$(".cent2-img").fadeIn(100);
switch (o.pos) {
case 0:
$(".cent2-img1").fadeOut(100);
break;
case 1:
$(".cent2-img2").fadeOut(100);
break;
case 2:
$(".cent2-img3").fadeOut(100);
break;
case 3:
$(".cent2-img4").fadeOut(100);
break;
}
} else { //移出
$(".cent2-img").fadeIn(100);
}
},
bindEvent: function () {
//鼠标位置获取
$(".mid-cent").mousemove(function (e) {
if (e.pageX || e.pageY) {
var x = e.pageX,
y = e.pageY;
} else {
var x = e.clientX + document.body.scrollLeft - document.body.clientLeft,
y = e.clientY + document.body.scrollTop - document.body.clientTop;
}

var offsetX = $(this).offset().left,
offsetY = $(this).offset().top;

o.point.x = x - offsetX;
o.point.y = y - offsetY; //鼠标当前坐标位置

for (var i = 0; i < 4; i++) {
o.checkPP(o.point, o.polygon[i], i);
if (o.flag) { // 位于多边形内
break;
}
}
//移入、移出、内部移动、外部移动
if (!o.flag) {
if (o.pos == o.lastpos) { //移出
o.lastpos = -1;
o.hoverEffect(o.flag);
}
} else {
if (o.pos !== o.lastpos) { //移入
o.hoverEffect(o.flag);
o.lastpos = o.pos;
}
}
});
},
//向量叉乘
crossMul: function (v1, v2) {
return v1.x * v2.y - v1.y * v2.x;
},
//两条直线是否相交
checkCross: function (p1, p2, p3, p4) {
var v1 = {x: p1.x - p3.x, y: p1.y - p3.y},
v2 = {x: p2.x - p3.x, y: p2.y - p3.y},
v3 = {x: p4.x - p3.x, y: p4.y - p3.y},
v = o.crossMul(v1, v3) * o.crossMul(v2, v3),
v1 = {x: p3.x - p1.x, y: p3.y - p1.y},
v2 = {x: p4.x - p1.x, y: p4.y - p1.y},
v3 = {x: p2.x - p1.x, y: p2.y - p1.y};
return (v <= 0 && o.crossMul(v1, v3) * o.crossMul(v2, v3) <= 0) ? true : false;
},
//判断点是否在多边形内
checkPP: function (point, polygon, pos) {
var p1, p2, p3, p4
p1 = point
p2 = {x: -100, y: point.y}
var count = 0
//对每条边都和射线作对比
for (var i = 0; i < polygon.length - 1; i++) {
p3 = polygon[i]
p4 = polygon[i + 1]
if (o.checkCross(p1, p2, p3, p4) == true) {
count++
}
}
p3 = polygon[polygon.length - 1]
p4 = polygon[0]
if (o.checkCross(p1, p2, p3, p4) == true) {
count++
}
(count % 2 == 0) ? o.flag = false : o.flag = true;
//移动位置记录位于哪个区域
if (o.flag) { //多边形内部
o.pos = pos;
}
},
//数字位数补齐，1对应000001，11对应000011
padNum: function (num, n) {
var len = num.toString().length;
while (len < n) {
num = '0' + num;
len++;
}
return num;
}

}

代码如上：大概思路是这样： 

$(".mid-cent").mousemove(function (e) {
if (e.pageX || e.pageY) {
var x = e.pageX,
y = e.pageY;
} else {
var x = e.clientX + document.body.scrollLeft - document.body.clientLeft,
y = e.clientY + document.body.scrollTop - document.body.clientTop;
}

var offsetX = $(this).offset().left,
offsetY = $(this).offset().top;

o.point.x = x - offsetX;
o.point.y = y - offsetY; //鼠标当前坐标位置

//通过上面代码获取鼠标所在位置， 其中以.mid-cent  的div边框的左上角为左边原点

for (var i = 0; i < 4; i++) {
o.checkPP(o.point, o.polygon[i], i);//判断相交焦点个数
if (o.flag) { // 位于多边形内
break;
}
}
//移入、移出、内部移动、外部移动
if (!o.flag) {
if (o.pos == o.lastpos) { //移出
o.lastpos = -1;
o.hoverEffect(o.flag);
}
} else {
if (o.pos !== o.lastpos) { //移入
o.hoverEffect(o.flag);
o.lastpos = o.pos;
}
}
});