본문 바로가기

프로젝트

Canvas: 오브젝트 확대, 축소

 

Direct2D를 사용한 간단한 프로젝트로 Excalidraw를 참조하여 만들고 있다.

현재 도형 그리기, 선택, 이동, 삭제하는 기능들을 추가했고 도형에 크기를 조절하는 기능을 추가할 차례다.

아래 이미지 처럼 현재 선택된 도형은 도형 겉으로 파란색 가이드라인이 생긴다(여러 개도 선택 가능).

 

 

가이드라인 위에 있는 조그만 사각형을 커서로 잡고 움직이면 크기가 조절된다.

크기 조절은 커서로 잡은 위치부터 커서가 이동한 위치까지의 차이 값을 도형에 Left-Top 또는 Right-Bottom에 잘 더해주면 된다.

하지만 위 방법은 선택된 도형이 한 개일 때만 가능한 방법이다. 만약 선택된 도형이 여러 개인데 위 방법을 사용할 경우 아래와 같이 작동한다.

이걸 원하는 게 아니었는데?

 

왼쪽 사각형의 가로가 길어지는데 오른쪽 사각형의 왼쪽 세로 변은 움직이지 않아 결국 넘어 버리는 현상이 발생한다.

이 문제를 해결하려고 위에서 말한 Excalidraw에서 도형 여러 개 선택해서 이리저리 만져보고 나서야 여러 도형이 선택되었을 때는 선택된 영역이 확대, 축소처럼 작동한다는 걸 알게 됐다

위 이미지를 잘 보면 커서로 잡은 꼭짓점에 대각에 있는 점은 절대 움직이지 않는다. 이는 커서로 잡은 위치에 가까울수록 많이 움직이고, 그 대각에 있을수록 적게 움직인다는 말이다.

오브젝트(사각형)는 두 개의 점으로 이루어져있는데 각 점을 커서로 잡은 위치에 대각에서 얼만큼 떨어졌는지 계산하고 전체 길이로 나누어주면된다. 이렇게 하면 왼쪽 사각형이 오른쪽 사각형과 겹쳐지는 일은 일어날 수 없다.

 

위와 같이 수정하면 제대로 작동하는 것을 볼 수 있다.