javascript - 캔버스 페이지에서 마우스를 클릭하면 점의 위치가 그려진 선 위에 있는지 확인하는 방법은 무엇입니까? 그려진 선에서 뭔가가 이벤트를 트리거합니까?

Question

다음은 편집 모드에 들어갔을 때 마우스 왼쪽 버튼을 클릭했을 때 해당하는 vcanvas의 위치가 기록된 세 단락의 밑줄 친 코드입니다. 내가 클릭한 점이 내가 그린 선분에 있는지 어떻게 알 수 있나요?

//밑줄 친 키코드입니다

으아악

Answer 1

일반적으로 이렇게 하면 게임을 작성하는 것처럼 먼저 선분(4개 정점의 x, y)에 대해 선택 가능한 범위를 설정해야 합니다.
그런 다음 캔버스에서 마우스 좌표를 가져와 마우스가 위치한 개체의 선택 범위를 결정합니다. 이때 관찰자 모드를 사용하여 이벤트 바인딩을 구현하는 것을 고려할 수 있습니다.
좌표가 범위 내에 있는지 확인하는 알고리즘은 광선 방식으로 확인할 수 있습니다(선분의 회전 및 크기 조정이 가능함을 고려).

도움을 드리고 싶지만 얼마 전 컴퓨터 하드 드라이브가 고장나서 제가 작성한 소스 코드가 사라졌습니다.
기본 아이디어를 적어 보겠습니다.
1. 먼저 댓글의 예를 보고 범위를 설정합니다. 4개의 정점이 설정되면 기본적으로 범위가 얼마나 큰지 알 수 있습니다. 그것은 당신의 개인적인 필요에 달려 있습니다.

2. "관찰자 모드"(게시자-구독자 모드)는 온라인에서 기본 코드를 검색하면 실제로 매우 이해하기 쉽습니다.

3. 회전 후 좌표 알고리즘은 여기를 클릭하여(반시계 방향 회전 공식임) 바로 적용하세요.

4. 광선 방법의 경우 벡터를 사용하여 계산해야 할 수도 있습니다. 고등학교 수학을 떠올려보세요.

링크를 고쳐놨으니 먼저 천천히 배워보세요. 귀찮은 것 같지만 알고 나면 실제로는 매우 쉽습니다.