[TypeScript] 제스처로 대화하기. #9 - 팬(with. 스와이프) 편

이번 편은 이전 편으로부터 이어집니다.

스와이프는 특정 축을 따라 이동하는 팬 동작을 의미합니다. 즉, 이동 축을 제한한 팬입니다. 대부분 수직, 수평 축에 대해 사용합니다. 축을 제한하려면 어떻게 해야 할까요? 이를 위해서는 포인터의 좌표를 축 위에 놓아야 합니다. 이는 축에 내린 수선의 발을 구하는 문제와 동일합니다.

function findPerpendicularFootOnAxis(x: number, y: number, axis: number): Point {
    if(axis % 180 === 0) { return { x, y: 0 }; }
    if(axis % 90 === 0) { return { x: 0, y }; }

    // ...
}

수평(x 축)과 수직(y 축)에 대해서는 축에 대한 좌표만 취하는 것으로 간단히 구할 수 있습니다. 하지만 좀 더 세밀하게 조정하기 위해서는 어떻게 해야 할까요? 이는 서로 수직으로 교차하는 축의 교점을 구하는 것과 같습니다.

축의 그래프가 \(y = ax + b\)라고 합시다. 그래프는 항상 원점을 지나므로 \(x=0\)일 때, \(y = 0\)입니다. 따라서 \(b = 0\)이 됨에 따라 자연히 \(y = ax\)가 됩니다.

교차 축의 그래프는 \(y = cx + d\)라고 합시다. 두 그래프의 교점에 대해 \(y = ax = cx + d\)가 성립하므로 \(x = d/(a - c)\)가 됩니다. 또 두 그래프는 서로 수직이므로 \(a * c = -1\)이 성립하여 \(c = -1 / a\)가 됩니다.

function findPerpendicularFootOnAxis(x: number, y: number, axis: number): Point {
    if(axis % 180 === 0) { return { x, y: 0 }; }
    if(axis % 90 === 0) { return { x: 0, y }; }

    const a = Math.tan(axis * Math.PI / 180);
    const c = -1 / a;
    const d = y - c * x;

    const footX = d / (a - c);
    const footY = a * footX;

    return { x: footX, y: footY };
}

위 함수를 통해 이전 좌표와 현재 좌표에 대해 각각 수선의 발의 좌표를 구할 수 있습니다. 이 과정을 수행한 후, 팬의 구현과 동일하게 전개할 수 있습니다.

const prevFootPoint = findPerpendicularFootOnAxis(prevPoint.x, prevPoint.y, axis);
const currFootPoint = findPerpendicularFootOnAxis(e.x, e.y, axis);

const deltaX = currFootPoint.x - prevFootPoint.x;
const deltaY = currFootPoint.y - prevFootPoint.y;

// ...

시리즈는 다음 편에서 계속됩니다. 읽어주셔서 감사합니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.