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

 

上面的描述可能表述的不大清楚 望了解   之后绝壁认证组织语言 认真的写