Geometry.md

좌표 시스템 (Geometry)

에디터에서 렌더링 되는 모든 레이어들은 기본 좌표 시스템을 가집니다.

css 에서 제공되는 x, y, width, height 로 맞춰진 absolute 형태의 좌표 시스템이 기본입니다.

스크린(Screen) 좌표와 월드(World) 좌표

스크린 좌표은 말 그대로 디스플레이 화면에서 내가 어느 지점에 있는지에 대한 것을 가리킵니다. 월드 좌표는 렌더링 되는 레이어가 Canvas 위에서 어디에 있는지를 가리킵니다.

기본적으로 우리가 보는 모든 화면은 스크린 좌표 기준이긴 하지만 실제 행위를 위한 좌표는 월드 좌표 이기 때문에 두가지 좌표를 계속적으로 변환을 해서 위치를 맞춰야 합니다.

스크린 좌표를 월드 좌표로 변환

화면에 클릭한 하나의 점을 해당 캔버스의 실제 월드 좌표로 변환합니다.

스크린 좌표는 viewport 시스템을 기준으로 가지고 올 수 있습니다.

// e 는 발생한 마우스 이벤트입니다. 
const pos = this.$viewport.getWorldPosition(e);

이렇게 하면 스크린을 클릭하고 있지만 실제로 월드 좌표로 변환해서 작업을 수행할 수 있습니다.

월드 좌표를 스크린 좌표로 변환

실제 레이어에 어떤 위치 이동이 일어난 이후로 화면에서 그려지는 그 영역을 알아야 할 때가 있습니다.

Selection 툴을 만든다던가 ClipPath 에디팅 도구를 만든다던가 하는 일들이죠.

이 때 해당 레이어의 위치를 가지고 viewport 기준의 스크린 좌표로 옮겨서 작업을 합니다.

const layer = this.$selection.current;
const verties = layer.verties;

const screenPos = this.$viewport.applyVerties(verties);

좌표시스템은 모두 Matrix(행렬)

현재 모든 좌표 시스템은 Matrix(행렬) 을 사용해서 적용되어 있습니다.

이렇게 되어 있는 이유는 여러 중첩된 위치를 한번에 계산할 방법이 필요했기 때문입니다.

코어 라이브러로는 gl-matrix 를 사용하고 있습니다.