最近有個(gè)項(xiàng)目,需要使用js來旋轉(zhuǎn)元素男旗,然后查找到了atan2這個(gè)函數(shù)可以使用舶斧,稍微總結(jié)一下
效果
地址
atan2 方法返回一個(gè) -pi 到 pi 之間的數(shù)值,表示點(diǎn) (x, y) 對應(yīng)的偏移角度察皇。這是一個(gè)逆時(shí)針角度茴厉,以弧度為單位,正X軸和點(diǎn) (x, y) 與原點(diǎn)連線 之間
因?yàn)閍tan2返回的是弧度值什荣,也就是從-PI到PI,如下圖所示矾缓,一個(gè)半圓是180度=弧度PI,所以1度 = PI/180
比如現(xiàn)在某個(gè)點(diǎn)的坐標(biāo)為{x:5,y:5},用atan2計(jì)算出來的角度
degree= Math.atan2(5,5) / (Math.PI/180)
等于45°,注意:這里的第一個(gè)參數(shù)是y的坐標(biāo)但是現(xiàn)在這個(gè)角度我們還不能直接使用稻爬,因?yàn)榛《仁且粋€(gè)逆時(shí)針方向計(jì)算出來的嗜闻,而我們旋轉(zhuǎn)的時(shí)候是按正時(shí)針方向旋轉(zhuǎn),所以我們用的時(shí)候要先進(jìn)行取反:
degree = -degree
1.上面的情況我們是已知當(dāng)前的中心點(diǎn)桅锄,如果我們不知道當(dāng)前的中心點(diǎn)呢
這里我們就需要計(jì)算一下了
$(document).on('mousemove',function(e){
var x = e.pageX;
var y = e.pageY;
var origin = {x:200,y:100} // 先手動指定當(dāng)前中心點(diǎn)琉雳,也可以根據(jù)當(dāng)前元素的left+width/2 的到x top+height/2 得到y(tǒng)值
// 計(jì)算出當(dāng)前鼠標(biāo)相對于元素中心點(diǎn)的坐標(biāo)
x = x - origin.x; // 因?yàn)閤大于origin.x 是在y軸右邊,直接減就行了
y = origin.y - y;// 但是y如果要在x軸上方友瘤,它是比origin.y要小的翠肘,所以這里就需要反過來
// 然后計(jì)算就可以了
atan2(y,x);
});
2.上面出現(xiàn)的情況是元素默認(rèn)水平,但如果元素默認(rèn)是垂直怎么辦呢
degree = Math.atan2(y,x) / (Math.PI / 180) - 90;// 默認(rèn)先減90度辫秧,再取反
degree = -degree;
默認(rèn)垂直