判断鼠标在多边形外

判断点在多边形外算法：

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

以下通过一个简单例子：

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

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;
}
}
});

ruby前端观察

判断鼠标在 多边形外

判断鼠标在多边形外