最近在研究web中元素的方位问题，判断进入一个元素是方向遇到另一个问题atan2(y,x)的使用。
这么多年没有关注三角函数了，好多都已经忘了。
Javascript 中定义：atan2() 方法可返回从 x 轴到点 (x,y) 之间的角度，这个角度就是（-π，π）。
直角坐标系
javascript代码实现：
console.log(Math.atan2(20,10)); //坐标（10，20）的弧度
onsole.log(Math.atan2(10,10)); //坐标（10，10）的弧度
onsole.log(Math.atan2(-10,10)); //坐标（10，-10）的弧度
onsole.log(Math.atan2(-10,-10)); //坐标（-10，-10）的弧度
onsole.log(Math.atan2(10,-10)); //坐标（-10，10）的弧度
结果
页面中一个矩形盒子获取鼠标进入盒子的方向
实例 鼠标从左边进入盒子
/**
* [getDirection 获取鼠标进入盒子的方向]
* @param {[type]} ev [事件]
* @param {[type]} obj [盒子对象]
* @return {[type]} [description]
*
* 函数中 x,y轴的（0,0）在内容盒子的中心
*
*/
var getDirection = function(ev, obj) {
var w = obj.offsetWidth,
h = obj.offsetHeight,
x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
console.log('atan2:' + Math.atan2(y, x) / 1.57079633 + 5)
console.log('w:' + w, 'h:' + h, 'x:' + x, 'y:' + y, 'd:' + d)
return d;
};
var addContent = function(ev, obj, state) {
var direction = getDirection(ev, obj);
switch(direction) {
case 0:
obj.innerHTML ='top'; break;
case 1:
obj.innerHTML='right'; break;
case 2:
obj.innerHTML ='bottom'; break;
case 3:
obj.innerHTML ='left'; break;
}
};
// bind events
document.getElementById('con').addEventListener('mouseover', function(ev) {
addContent(ev, this, 'in');
}, false);
document.getElementById('con').addEventListener('mouseout', function(ev) { addContent(ev, this, 'out');
}, false);
其实判断盒子从那个方位进入盒子有很多方法：
坐标轴系X,Y坐标判断
以盒子的右下角为原点
直角坐标系
x>0 && y>0 && x<y (top)
x>0 && y>0 && x>y (right)
x>=0 && y==0 (bottom)
x==0 && y>0 (left)
网友评论