如何使用整数值(不是向量)计算两条线之间的度数
How to calculate degree between two line with integer values (not vectors)
我正在制作小效果动画,它创建 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))
相关文章:
- 为什么我的画布上只显示两条线
- D3 - 在两个不与其他对象相交的对象之间绘制一条线
- 使用 D3 的两条线之间的阴影区域
- Snap.如何始终用一条线连接两个对象
- 在画布上移动两条以上的箭头线
- 在拉斐尔JS的两个百分点之间画一条线
- 如何使用整数值(不是向量)计算两条线之间的度数
- 试图通过两条线获得自定义和无限的猫头鹰轮播
- 如何设置角度谷歌折线图的样式,使其在同一条线上有两种样式
- JS在两个或多个点之间画一条线
- 使用d3来遮挡两条线之间的区域
- D3:是否可以根据阈值绘制一条线并将其分配给两个轴
- 我怎么知道两条线是否重叠?
- Touchmove在画布上绘制两条线而不是一条线
- 小叶中两条线的交点
- 广告画廊.用两条线表示
- 如何在线形图上的两条线之间使用chart.js version2
- 这两条线的区别
- 如何使图表JS中的两条线变粗
- 高图表:显示两条线而不是一条线