角度に基づいて（x、y）座標を見つける必要があります

Question

だから私は困惑しています。私はこれの前に三角法を知らなかった。私は学んでいたが、何も働いていないようだ。

注意するので、いくつかのこと：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（）を使って私のカスタム原点とマウスポイントの間の角度を計算します。私はまた、Math.sqrt（（Math.pow（（x2-x1）、2））+（Math.pow（y2-y1）、2）））を使って距離を計算します。

青い線の長さは赤い線の長さの半分ですが、赤い線の角度に基づいて角度が変わります。

赤い線の角度= 0deg（平らな線）のとき、青い線の角度は-90（まっすぐ上がる、赤い線-45deg、青い線は-180赤線-90では、青線は-270度（まっすぐ下）、式は-90 +（角度* 2）

青い線のもう一方の端点を知る必要があります。デバッグにのみ存在しますが、私はベジェ曲線上でロケットをアニメーションするアニメーションがあるので、ポイントが必要です。マウスクリックの角度に基づいてコントロールポイントを変更する必要があります。三角法、それから私に知らせてください。

私は角度がsl Math.tan（ラジアン単位の角度）を使って見つけることができます。ときには、三角形は直角三角形になります。たとえば、最初の角度が0度の場合は三角形にならない場合がありますが、-90をクリックした場合などは一直線になります。

私も試した極座標は、私が使用してどの角度わからないと思った。

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)だけでなく、角度を持っています。これは、これらの値を上記の式に差し込むだけの問題です。

Answer 2

A,BおよびCを3点とします。次に、あなたの場合は

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)