지정된 거리에 선 붙이기

Question

나는 JavaScript 캔버스에 선과 점을 많이 그리 고있다. 사용자가 클릭하면 포인트가 추가되고 다음 포인트로 연결되는 미리보기가 추가됩니다.

이미지 예 :이 이미지

사용자는 세 어두운 녹색 점을 만드는 세 번 클릭있다. 현재 사용자는 마지막 클릭 한 지점에서 28 픽셀 떨어진 지점을 가리키며 밝은 녹색 연결, 점 및 거리를 나타내는 검정 상자를 만듭니다.

이제 밝은 녹색 점을 28px로 스냅하고 싶습니다. 그 일을 어떻게 하죠? 10px의 임계 값을주고 싶습니다. 임계 값 이내이면 스냅 할 수 있습니다. 나는 이것을 수학적으로 행할 수있는 좋은 방법이 있음을 알고 있지만 그것을 이해할 지식이 없다.

도움 주셔서 감사합니다.

Answer 1

마우스가 움직이는 동안 거리를 확인하십시오 (X_Current는 현재 마우스 위치, X_0은 마지막 점 위치 임). 거리와 임계 값으로 28 개, 10 상수를 교체 : 새로운 점의

Squared_Distance = (X_Current-X_0)*(X_Current-X_0) + (Y_Current-Y_0)*(Y_Current-Y_0) 
if ((Squared_Distance >= (28 - 10)*(28 - 10)) && (Squared_Distance <= (28 + 10)*(28 + 10))) 
    then snap it 

위치를 28px 거리 :

Curr_Distance = Sqrt(Squared_Distance) // assert <> 0 
Dir_X = (X_Current-X_0)/Curr_Distance 
Dir_Y = (Y_Current-Y_0)/Curr_Distance 
P28_X = X0 + 28 * Dir_X 
P28_Y = Y0 + 28 * Dir_Y