需要根据角度找到 (x,y) 坐标
Need to find a (x,y) coordinate based on an angle
所以我很难过。之前我不懂三角学,一直在学习,但似乎没什么用。
所以有几点需要注意:在html中,笛卡尔原点(0,0)是屏幕的左上角。 DIVS 自然旋转是 0deg 或 ---->这样。
我需要找到 ?标记问题。
$('#wrapper').on('click', function(e){
mouseX = e.pageX;
mouseY= e.pageY;
var angle = getAngle(mouseX,Rocket.centerX,mouseY,Rocket.centerY);
var angleDistance = Math.sqrt((Math.pow((mouseX - (Rocket.left+Rocket.halfX)),2)) + (Math.pow((mouseY-(Rocket.top+Rocket.halfY)),2)));
var cp2Angle = -90 +(angle*2);
var invCP2Angle = 90+ angle;
var cp2Distance = angleDistance*.5;
//Red Line
$(this).append('<div class="line" style="transform-origin:left center;width:'+(Math.round(angleDistance))+'px;top:'+(Rocket.top+Rocket.halfY)+'px;left:'+(Rocket.left+Rocket.halfX)+'px;transform:rotate('+(Math.round(angle))+'deg);"></div>');
//Blue Line
$(this).append('<div class="line" style="background:#0000FF;transform-origin:left center;width:'+Math.round(cp2Distance)+'px;top:'+(mouseY)+'px;left:'+(mouseX)+'px;transform:rotate('+(Math.round(cp2Angle))+'deg);"></div>');
}
function getAngle(x2,x1,y2,y1){
var angle = Math.degrees(Math.atan2(y2-y1,x2-x1));
return angle;
}
Math.degrees = function(radians) {
return (radians * 180) / Math.PI;
};
所以这可能会造成混淆。基本上当我点击页面时,我使用 Math.atan2(); 计算我的自定义原点和鼠标点之间的角度;我还使用 Math.sqrt((Math.pow((x2 - x1),2)) + (Math.pow((y2-y1),2)));
蓝线长度是红线长度的一半,但角度会根据红线的角度而变化。
当红线角度=0deg(平线)时,蓝线角度为-90(或直线上升,红线-45度时,蓝线为-180(或平),在红线 -90 处,蓝线将是 -270 度(或垂直向下)。公式为 -90 +(角度*2)
我需要知道蓝线的另一端点。这些线仅用于调试,但需要点,因为我有一个动画,我在贝塞尔曲线上为火箭制作动画,如果有更好的计算方法,我需要根据鼠标单击的角度更改控制点没有三角函数,然后让我知道。
我读到角度与直线的斜率相同,并使用 Math.tan(以弧度表示的角度)找到它。有时三角形将是直角三角形,例如,如果第一个角度为 0 度,有时它根本不是三角形,而是一条直线向下,例如,如果他们单击 -90。
我也尝试过极坐标,但我不确定要使用哪个角度:
var polarX = mouseX-(cp2Distance * Math.cos(Math.radians(invCP2Angle)));
var polarY = mouseY- (cp2Distance * Math.sin(Math.radians(invCP2Angle)));
我不太了解javascript,所以我不会给你代码,而是给你公式。在下图中,我给你使用的约定。
x3 = x2 + cos(brownAngle + greenAngle) * d2
y3 = y2 + sin(brownAngle + greenAngle) * d2
如果我没理解错的话,你已经d2 = 0.5 * d1
、d1
、(x2, y2)
以及角度了。这应该只是将这些值代入上述公式的问题。
设A
、B
和C
为三点。
AB = ( cos(angle1), sin(angle1) ) * length1
B = A + B
BC = ( cos(angle1+angle2), sin(angle1+angle2) ) * length2
C = B + BC
在你的情况下,
A = ( 0, 0 )
angle1 = 31°
length1 = 655
angle2 = 152°
length2 = 328
然后,
C = ( Math.cos(31*Math.PI/180), Math.sin(31*Math.PI/180) ) * 655 +
( Math.cos(152*Math.PI/180), Math.sin(152*Math.PI/180) ) * 328
= ( Math.cos(31*Math.PI/180) * 655 + Math.cos(183*Math.PI/180) * 328,
Math.sin(31*Math.PI/180) * 655 + Math.sin(183*Math.PI/180) * 328 )
= ( 233.8940945603834, 320.1837454184)
所以我很难过。之前我不懂三角学,一直在学习,但似乎没什么用。
所以有几点需要注意:在html中,笛卡尔原点(0,0)是屏幕的左上角。 DIVS 自然旋转是 0deg 或 ---->这样。
我需要找到 ?标记问题。
$('#wrapper').on('click', function(e){
mouseX = e.pageX;
mouseY= e.pageY;
var angle = getAngle(mouseX,Rocket.centerX,mouseY,Rocket.centerY);
var angleDistance = Math.sqrt((Math.pow((mouseX - (Rocket.left+Rocket.halfX)),2)) + (Math.pow((mouseY-(Rocket.top+Rocket.halfY)),2)));
var cp2Angle = -90 +(angle*2);
var invCP2Angle = 90+ angle;
var cp2Distance = angleDistance*.5;
//Red Line
$(this).append('<div class="line" style="transform-origin:left center;width:'+(Math.round(angleDistance))+'px;top:'+(Rocket.top+Rocket.halfY)+'px;left:'+(Rocket.left+Rocket.halfX)+'px;transform:rotate('+(Math.round(angle))+'deg);"></div>');
//Blue Line
$(this).append('<div class="line" style="background:#0000FF;transform-origin:left center;width:'+Math.round(cp2Distance)+'px;top:'+(mouseY)+'px;left:'+(mouseX)+'px;transform:rotate('+(Math.round(cp2Angle))+'deg);"></div>');
}
function getAngle(x2,x1,y2,y1){
var angle = Math.degrees(Math.atan2(y2-y1,x2-x1));
return angle;
}
Math.degrees = function(radians) {
return (radians * 180) / Math.PI;
};
所以这可能会造成混淆。基本上当我点击页面时,我使用 Math.atan2(); 计算我的自定义原点和鼠标点之间的角度;我还使用 Math.sqrt((Math.pow((x2 - x1),2)) + (Math.pow((y2-y1),2)));
蓝线长度是红线长度的一半,但角度会根据红线的角度而变化。
当红线角度=0deg(平线)时,蓝线角度为-90(或直线上升,红线-45度时,蓝线为-180(或平),在红线 -90 处,蓝线将是 -270 度(或垂直向下)。公式为 -90 +(角度*2)
我需要知道蓝线的另一端点。这些线仅用于调试,但需要点,因为我有一个动画,我在贝塞尔曲线上为火箭制作动画,如果有更好的计算方法,我需要根据鼠标单击的角度更改控制点没有三角函数,然后让我知道。
我读到角度与直线的斜率相同,并使用 Math.tan(以弧度表示的角度)找到它。有时三角形将是直角三角形,例如,如果第一个角度为 0 度,有时它根本不是三角形,而是一条直线向下,例如,如果他们单击 -90。
我也尝试过极坐标,但我不确定要使用哪个角度:
var polarX = mouseX-(cp2Distance * Math.cos(Math.radians(invCP2Angle)));
var polarY = mouseY- (cp2Distance * Math.sin(Math.radians(invCP2Angle)));
我不太了解javascript,所以我不会给你代码,而是给你公式。在下图中,我给你使用的约定。
x3 = x2 + cos(brownAngle + greenAngle) * d2
y3 = y2 + sin(brownAngle + greenAngle) * d2
如果我没理解错的话,你已经d2 = 0.5 * d1
、d1
、(x2, y2)
以及角度了。这应该只是将这些值代入上述公式的问题。
设A
、B
和C
为三点。
AB = ( cos(angle1), sin(angle1) ) * length1
B = A + B
BC = ( cos(angle1+angle2), sin(angle1+angle2) ) * length2
C = B + BC
在你的情况下,
A = ( 0, 0 )
angle1 = 31°
length1 = 655
angle2 = 152°
length2 = 328
然后,
C = ( Math.cos(31*Math.PI/180), Math.sin(31*Math.PI/180) ) * 655 +
( Math.cos(152*Math.PI/180), Math.sin(152*Math.PI/180) ) * 328
= ( Math.cos(31*Math.PI/180) * 655 + Math.cos(183*Math.PI/180) * 328,
Math.sin(31*Math.PI/180) * 655 + Math.sin(183*Math.PI/180) * 328 )
= ( 233.8940945603834, 320.1837454184)