HTML5 다시 그리기 및 게시 HTML

Question

나는 HTML5에 세 개의 버튼이 있습니다. Add Circle, Add Text 및 Add Rectangle은 해당 모양을 그리기 위해 각각의 자바 스크립트를 호출합니다. 사용자가 위치를 변경하면 어떻게 새롭고 변경된 위치를 얻을 수 있습니까 ???

Answer 1

캔버스에서 "mouseDown"이벤트를 수신하는 경우 캔버스의 원점을 기준으로 마우스의 위치를 ​​저장할 수 있습니다. 그런 다음 "mouseUp"에서 다시 좌표를 가져와 선택한 모양을 새 위치로 변환합니다.

좋아, 그 기본 개념이었다, 더 자세한 설명을 위해, 당신은 다음과 같이해야 할 것 :

1. (Canvas에 상대적) 마우스 좌표를 얻을 mouseDown에와 마우스는 오프셋 얻을 (선택한 모양의 원점을 기준으로 한 마우스 위치)
2. on mouseMove 새 마우스 위치 가져 오기 (다시 캔버스 기준) 선택한 모양을 새 위치로 변환하고 이전에 계산 된 간격 띄우기를 적용해야합니다 여기에 ghosting effect을 사용할 수 있음)
3. on mouseUp 모양에 변형 적용 (이전 단계가 실제로 모양을 변환하는지 여부에 따라 선택 사항 일 수 있음)

멋진 하루 되십시오!