js按照指定長度縮小的計算思路

好比：某一段長度爲X:30.23443,總長度爲W:100.1238941，

這樣的長度在程序員裏是很差計算的 

那麼完美的數學知識能夠作到 換算   設總長度爲W：10，則X在W裏的所佔的長度爲X/W*10;

這樣的轉換計算實際上應用到不少場景 好比判斷鼠標的方向，鼠標移動效果；說到這裏其實你們也不明白我說的啥  那下面就用例子闡述下具體的用法

（圖片地址：http://sentsin.com/web/112.html）

上圖是一個判斷鼠標進入的方向    當width>height 那咱們把height當作圓的半徑進行畫圓 ，圓有四個象限把四個象限以45度角進行拆分 這樣一來就能夠生成四個範圍 每一個範圍就表明一個進入的方向，當鼠標從最右邊的黑色點進入的時候  經過計算即可以得出在圓裏對用的角度，經過角度即可以得出方向。

var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);

   計算x座標值時，若是點原來的x座標的絕對值大於圓的半徑值，則按 h/w 這個比例進行縮小，使獲得的點的位置在容器的邊界位置所對應的象限區間裏。 y 座標的計算也是同樣。

var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

除以90，再取四捨五入值，是一個很精妙的用法，使得能夠以45°爲分界線。

還有一個例子即是鼠標移動 文字陰影改變位置，鼠標不一樣的位置陰影的位置隨之不一樣，

當鼠標處於字體不一樣位置的時候陰影的位置跟隨改變，這樣看 咱們能夠取中間的一半做爲計算  假設長度爲100  咱們能夠獲得文字的長度以及鼠標位置在字體上距離左邊和上邊的距離  二者相比  在乘以100 就能夠獲得在長度爲100 所佔的大小  因爲是按照中點來計算陰影的位置  因此能夠獲得陰影x軸 和y軸上的值  能夠減去一半縮小陰影的變化的位置    就能夠得出最終的陰影的x軸和y軸的值

const content = document.querySelector('.content');
const  text = content.querySelector('h1');

function shadow (e){
    const {offsetWidth:width,offsetHeight:height} = content;//解構賦值
    let {offsetX:x,offsetY:y} = e; //offsetX是事件距離目標源的x軸位置
    const walk = 100;//100px  //將總長度 當作100換算


    if(this != e.target){
        console.log(e.target.offsetLeft)
        let xWalk = x+e.target.offsetLeft;
        let yWalk = y+e.target.offsetTop;
        let xShadow = (xWalk/width * walk) - (walk/2);
        let yShadow = (yWalk/height * walk) - (walk/2);

        text.style.textShadow = xShadow+'px '+yShadow+'px '+'0 red ';
    }
}
content.addEventListener('mousemove',shadow);

 

上面的描述可能表述的不大清楚 望瞭解   之後絕壁認證組織語言 認真的寫