javascript - 需要根据 Angular 找到 (x,y) 坐标

Question

所以我很困惑。在此之前我不懂三 Angular 学，我一直在学习，但似乎没有任何作用。

有几点需要注意:在 html 中，笛卡尔原点(0,0) 是屏幕的左上角。 DIVS 自然旋转为 0deg 或 ---->这样。

我需要找到 ? 标记的 x,y 点。标记问题。

$('#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() 计算自定义原点和鼠标点之间的 Angular ；我还使用 Math.sqrt((Math.pow((x2 - x1),2)) + (Math.pow((y2-y1),2)));

计算距离

蓝线长度是红线长度的一半，但 Angular 会根据红线的 Angular 而变化。

当红线 Angular = 0deg(一条平线)时，蓝线 Angular 将为-90(或直上)，在红线-45度时，蓝线将为-180(或平线)，在红线-90，蓝线-270度(或垂直向下)。公式为-90 +( Angular *2)

我需要知道蓝线的另一端点。这些线仅用于调试，但需要该点，因为我有一个动画，我在贝塞尔曲线上为火箭设置动画，并且我需要根据鼠标单击的 Angular 更改控制点(如果有更好的计算方法)如果没有三 Angular 学，那么请告诉我。

我读到 Angular 与直线的斜率相同，并使用 Math.tan(以弧度表示的 Angular )找到它。有时，如果第一个 Angular 为 0 度，则三 Angular 形将是直 Angular 三 Angular 形；有时，它根本不是三 Angular 形，而是一条向下的直线，例如，如果单击 -90。

我也尝试过极坐标，但我不确定使用哪个 Angular :

var polarX = mouseX-(cp2Distance * Math.cos(Math.radians(invCP2Angle)));
var polarY = mouseY- (cp2Distance * Math.sin(Math.radians(invCP2Angle)));

Answer 1

我不太了解 javascript，所以我不会给你代码，而是给你公式。在下图中，我给出了所使用的约定。

x3 = x2 + cos(brownAngle + greenAngle) * d2
y3 = y2 + sin(brownAngle + greenAngle) * d2

如果我理解正确的话，您已经有了 d2 = 0.5 * d1、d1、(x2, y2) 以及 Angular 。只需将这些值代入上述公式即可。