고라니드로의 블로그

고라니드로의 블로그

#origin

Articles tagged with #origin

[TypeScript] 제스처로 대화하기. #17 - 로테이트 편(with. 기준점)
이번 편은 이전 편으로부터 이어집니다. 핀치 때와 마찬가지로 기준점에 대해 한번 생각해 봅시다. 마찬가지로 고정된 포인터를 기준점으로 생각할 수 있습니다. 이를 수행하기 위한 변환 행렬은 아래와 같습니다. $$\begin{aligned} \begin{pmatrix} 1 & 0 & t_x \\ 0 & 1 & t_y \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} \cos\theta & -\sin\theta & 0 \...
Jan 18, 20253 min read21
[TypeScript] 제스처로 대화하기. #15 - 핀치(with. 기준점) 편
이번 편은 이전 편으로부터 이어집니다. 이번에는 기준점에 대해 한번 생각해 봅시다. 포인터 이벤트는 하나의 포인터에 대해 개별적으로 발생합니다. 두 포인터의 이동이 거의 동일하더라도 말이지요. 따라서 두 포인터에 대해 움직이는 포인터와 고정된 포인터로 생각할 수 있습니다. 그렇다면 고정된 포인터가 기준점이 되겠네요. 이를 수행하기 위한 변환 행렬은 아래와 같습니다. $$\begin{aligned} \begin{pmatrix} 1 & 0 & t...
Jan 4, 20253 min read16
[TypeScript] 변환 원점 찾기
잠깐! transform에 대해 아직 잘 모른다면 [CSS] 변환 행렬을 먼저 읽어보세요! 상황에 따라 동적으로 뷰포트에 대한 transform-origin의 좌표를 구해야 할 수 있습니다. 대상이 변환이 수행되지 않은 경우라면 getBoundingClientRect를 사용해 쉽게 구할 수 있습니다. 하지만 변환이 수행된 경우는 생각보다 까다롭습니다. 차근차근 살펴보도록 하겠습니다. 우선 변환이 고려되지 않은 상황, 그중에서도 대상 영역에 대...
Dec 28, 20243 min read14

#origin - 고라니드로의 블로그