如何使用整数值(不是向量)计算两条线之间的度数

How to calculate degree between two line with integer values (not vectors)

本文关键字:两条线 计算 之间 向量 整数 何使用      更新时间:2023-09-26

我正在制作小效果动画,它创建 5 个独特的对象,从中心向 5 个不同的方向扩展。对象不应该相互堆叠,所以我正在考虑将它们分布在单独的圆角中,但我不知道如何计算两个随机创建的 px 线长度之间的角度(例如:100px 线和 50px 线)

这是我的代码:

//Container of the objects
var box =  $('.nodebox')
box.css({
height: box.width(),
top: (($(window).height() - box.width())/2),
})
//Main object in the center, one click on this, it will disappear followed by the activation of 5 sub-objects animation.
var Ndd = $('.Node');
Ndd.css({
top: ((box.width()-Ndd.width())/2),
left:((box.height()-Ndd.height())/2)
})
//Randomly creating the sub-objects
function createNnodes(n){
var nodeArrays = [];
    for (var i = 0; i< n ; i++){
        var smNd = $('<div class="smallNodes"></div>');
        if (!$('body').data('mobile')){ //check to see if the device is mobile or not
        var widthn = (Math.random()*($(window).width()*0.04) + $(window).width()*0.01);
        } else {
        var widthn = (Math.random()*($(window).width()*0.1) + $(window).width()*0.04);
        };
        var heightn = widthn; //making sure the objects are square-shaped
        smNd.css({width: widthn, height: heightn})
        nodeArray.push(smNd);
    }
return nodeArrays;
}
//Handling the animation 
function animateNodes(){
var nodeArray = createNnodes(6);
//creating 2 random distances for each object so that it tralvels diagonally or horizontally or vertically
for (var i = 0; i < nodeArray.length; i++){
  var distance1 = ((Math.random()*Ndd.width()) + Ndd.width()*0.5);
  var distance2 = ((Math.random()*Ndd.width()) + Ndd.width()*0.5);
        //Create random "+" or "-" 
        function Pornot() {
           if(Math.floor(Math.random()*2)){
              return '+=';
           }else {
              return '-=';
           }
        }
  var plusornot1 = Pornot();
  var plusornot2 = Pornot();
  $(nodeArray[i]).css({
      top:((box.height()-$(nodeArray[i]).width())/2),
      left:((box.width()-$(nodeArray[i]).width())/2)
  }).appendTo('.nodebox').animate({
      left: plusornot1 + distance1,
      top: plusornot2 + distance2,
      opacity:0,
    },2000,function(){
           $(nodeArray[i]).remove();
    })
}

}

上面的代码工作得很好,我唯一关心的是如何再次指定距离 1 和距离 2 之间的角度......

一张图片来演示:点击查看图片

单击屏幕后,主节点将消失。之后,在其后面创建节点的 5 个较小的实例,它们以 5 个不同的角度同步远离中心。

中心点坐标:(xc, yc)
第一点坐标:(x1, y1)
第二点坐标: (x2, y2)
线段 (xc, yc)-(x1, y1) 和 (xc, yc)-(x2, y2) 之间的角度:

dx1 = x1 - xc
dx2 = x2 - xc
dy1 = y1 - yc
dy2 = y2 - yc
len1  = Sqrt(dx1 * dx1 + dy1 * dy1)
len2  = Sqrt(dx2 * dx2 + dy2 * dy2)
Angle = ArcCos((dx1 * dx2 + dy1 * dy2) / (len1 * len2))