각도를 기반으로 (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 (또는 빨간색 선 -45도에서 곧은 위로, 파란색 선은 -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

내가 자바 스크립트 잘 모르는, 그래서 그 대신 당신에게 코드를 제공, 나는 당신에게주지 방식. 아래 그림에서는 사용 된 규칙을 알려줍니다.

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)