Canvas 도형 회전의 원리와 구현 방법

 

📌 이미지 회전 기능 추가하기

회전기능을 넣어보자!

 

사이드 프로젝트에서 캔버스에 그려진 이미지 회전 기능을 추가하려고 합니다.

canvas 에서 객체에 제공해주는 rotate API 를 사용하면 간편하게 구현할 수 있는데요.

학습도 해볼 겸 이미지 바운더리 영역에 대한 회전 연산은 직접 구현해보기로 결정했습니다.

지금부터 하나씩 살펴보겠습니다.

 

📌 데카르트 평면좌표에서 회전하기

이미지 제어영역에 대한 간략한 설명

여기서 제어영역 은 이미지 테두리를 둘러싼 영역을 의미합니다.

포커싱되면 나타나며 이미지를 삭제, 회전, 리사이즈 할 수 있는 앵커를 포함하고 있습니다.

이 제어영역은 캔버스의 터치 이벤트를 받아 point 값을 바탕으로 선택된 앵커타입을 구분하고 있습니다.

모든 캔버스 객체들은 path 정보를 포함하며, isPointInPath API 를 함께 사용하면

point 가 path 내부에 존재하는지 판단할 수 있습니다.

function findAnchorInPath({ context, anchors, point }) {
  return anchors.find((anchor) => context.isPointInPath(anchor.path2d, point.x, point.y))
}

 

2차원평면 회전 변환

먼저 데카르트 좌표계에서 사각형의 회전 방법을 알아야합니다.

이를 위해 유클리드 공간에서 회전변환을 위해 사용 되는 변환 행렬(transformation matrix) 을 사용합니다.

 

 

2차원 평면좌표 v(x, y) 에서 반시계방향으로 θ 만큼 회전 했을 때, v 를 열 벡터로 하는 곱 연산을 통해 변환 좌표값을 구할 수 있습니다.

 

 

주의할점은 캔버스가 일반적인 데카르트 좌표계와는 다르게 좌측상단이 (0, 0) 인 좌표공간으로 구성된다는 것입니다.

 

캔버스 좌표계

 

따라서 회전각 θ 를 부호 변환없이 사용하면 캔버스 좌표공간에서는 시계방향 회전각으로 사용할 수 있습니다.

 

👨‍💻 사각형 중점 회전변환 코드 구현

1️⃣ 사각형 중점 구하기

우리는 사각형의 중점을 기준으로 회전할 필요가 있습니다.

이를 위해 먼저 사각형의 중점을 구하는 함수를 구현합니다.

사각형의 중점은 north-west, south-east 두 좌표만 알면 구할 수 있습니다.

function getCenterOfBoundingRect({ nw, se }) {
  const x = Math.round((nw.x + se.x) / 2)
  const y = Math.round((nw.y + se.y) / 2)

  return { x, y }
}

 

2️⃣ 회전변환 행렬

이제 앞서 정의한 회전변환 행렬을 적용할 함수를 구현합니다.

function getRotatedPoint({ point, degree }) {
  const { x, y } = point
  const radian = degreeToRadian(degree)
  const vector = {
    x: Math.round(x * Math.cos(radian) - y * Math.sin(radian)),
    y: Math.round(x * Math.sin(radian) + y * Math.cos(radian)),
  }

  return vector
}

function degreeToRadian(degree) {
  return (degree * Math.PI) / 180
}

 

3️⃣ 사각형의 중점을 구하고 캔버스 원점으로 이동

위에서 구현한 함수를 가지고 사각형의 중점을 원점으로 이동시킵니다.

function getRotatedBoundingRectVertices({
  vertices,
  degree,
}) {
  const center = getCenterOfBoundingRect(vertices)
  const shiftedToOrigin = {
    nw: { x: vertices.nw.x - center.x, y: vertices.nw.y - center.y },
    ne: { x: vertices.ne.x - center.x, y: vertices.ne.y - center.y },
    sw: { x: vertices.sw.x - center.x, y: vertices.sw.y - center.y },
    se: { x: vertices.se.x - center.x, y: vertices.se.y - center.y },
  }

    // ...
}

 

4️⃣ 변환행렬 적용

이제 이동된 좌표값에 행렬곱을 적용합니다.

function getRotatedBoundingRectVertices({
  vertices,
  degree,
}) {
  const center = getCenterOfBoundingRect(vertices)
  const shiftedToOrigin = {/** */}
  const rotated = {
    nw: getRotatedPoint({ point: shiftedToOrigin.nw, degree }),
    ne: getRotatedPoint({ point: shiftedToOrigin.ne, degree }),
    sw: getRotatedPoint({ point: shiftedToOrigin.sw, degree }),
    se: getRotatedPoint({ point: shiftedToOrigin.se, degree }),
  }
  // ...
}

 

5️⃣ 사각형 중점을 다시 원래있던 위치로 이동시키기

변환이 끝난 뒤에 다시 사각형을 원래있던 위치로 이동시켜줍니다.

function getRotatedBoundingRectVertices({
  vertices,
  degree,
}) {
  const center = getCenterOfBoundingRect(vertices)
  const shiftedToOrigin = {/** */}
  const rotated = {/** */}
    const shiftBack = {
    nw: { x: rotated.nw.x + center.x, y: rotated.nw.y + center.y },
    ne: { x: rotated.ne.x + center.x, y: rotated.ne.y + center.y },
    sw: { x: rotated.sw.x + center.x, y: rotated.sw.y + center.y },
    se: { x: rotated.se.x + center.x, y: rotated.se.y + center.y },
  }

  return shiftBack
}

 

테스트 해보자

위에서 구현한 인터페이스에 대한 테스트코드를 작성합니다.

const example = {
  vertices: {
    nw: { x: 10, y: 10 },
    ne: { x: 20, y: 10 },
    sw: { x: 10, y: 20 },
    se: { x: 20, y: 20 },
  },
  degree: 30,
}

const result = getRotatedBoundingRectCoordinate(example)

expect(result).toStrictEqual({
  nw: { x: 13, y: 8 },
  ne: { x: 22, y: 13 },
  sw: { x: 8, y: 17 },
  se: { x: 17, y: 22 },
})

 

좌표가 올바르게 변환 되었는지 확인하기 위해 반환된 좌표값을 좌표계 시뮬레이션 앱으로 확인해봤습니다.

 

예상한대로 회전이 잘 되었네요!

 

💡 캔버스 좌표공간을 데카르트 좌표공간으로 매핑 시 주의할 점

앞서 언급했듯이 캔버스 좌표공간은 좌측상단이 (0, 0) 입니다.
따라서 캔버스 좌표를 데카르트 좌표계에서 확인할 시에는 x축 대칭변환 을 적용해야합니다.

이제 마지막으로 회전각과 좌표를 인자로 받아 사각형 테두리를 그리는 함수를 구현해줍니다.

function drawingBorder({ context, degree, vertices, }) {
    const rotatedVertices = getRotatedBoundingRectVertices({ degree, vertices })

    drawRect({ context, vertices: rotatedVertices, color: 'rgba(151, 222, 255, 0.7)' })
}

 

그리고 drawImageWithAnchor 에서는 테두리와 이미지를 그리는 역할을 부여합니다.

 

function drawImageWithAnchor({ image, context }) {
    const vertices = getBoundingRectVertices(image) // ✅ 이미지 객체의 꼭짓점을 구하는 함수가 이미 구현되어있다고 가정합니다.

    drawImage({ context, image }) // 💡 뒤에 이어서 이 함수를 구현합니다.

    if (image.focused) {
        drawingBorder({ context, degree: image.degree, vertices: }) // ✅ 이미지가 포커싱된 상태에서만 테두리를 그립니다.
    }
}

 

📌 캔버스에 회전된 이미지 그리는 방법

아직 이미지 자체를 그려주는 drawImage 함수를 구현하지 않았습니다.

또한 현재는 회전각을 임시 상수값을 사용해서 함수를 구현했는데요,

이제부터는 회전각을 구하는 방법과 함께 캔버스 객체를 회전시킬 때 사용하는 rotate API 도 살펴보겠습니다.

캔버스에서 회전을 위한 별도의 API 를 제공해주고 있고, 이를 적절히 활용하면 회전된 도형 및 이미지를 그릴 수 있습니다.

 

 

CanvasRenderingContext2D.rotate(angle)

 

여기서 angle 은 시계방향의 radian 값입니다.

일반적으로 사람에게 친숙한 각도는 degree 이기 때문에 앞선 변환식을 사용하도록 하겠습니다.

이제 이미지를 회전하기 위해 필요한 모든 것들을 알았습니다.

회전시키는 방법은 캔버스 를 회전 시킨다는 차이점을 제외하면 데카르트 좌표계에서와 동일한 mental model 을 공유합니다.

 

1. 이미지를 중심으로 회전하기 위해서 중점과 원점(origin) 의 거리만큼 캔버스를 옮겨줍니다.
2. 그리고 캔버스를 angle 만큼 회전해준 뒤에
3. 대상 이미지를 그려주고,
4. 다시 캔버스를 원래 위치했던 중점으로 옮겨줍니다.

 

👨‍💻 코드로 살펴봅시다.

현재 프로젝트에 정의되어있는 ImageObject 타입은 이미지 관련 속성 이외에도

사각형과 관련된 메타정보를 위해 BoundingRect 타입을 상속받고 있다고 하겠습니다.

 

interface ImageObject extends BoundingRect {
  /** image related props */
}

interface BoundingRect {
  /** top-left x position */
  sx: number
  /** top-left y position */
  sy: number
  width: number
  height: number
}

 

1️⃣ degree 타입 추가

이제 BoundingRect 에 degree 타입을 추가해서 회전 각도 정보를 관리할 수 있도록 합니다.

interface BoundingRect {
    // same as above ...
  degree: number // ✅ 회전각 정보도 추가!
}

 

2️⃣ 회전된 이미지 그리기

이미지를 배열 인자로 받아 캔버스에 그리는 코드는 정의합니다.

여기서 images 는 ImageObject[] 타입입니다.

function paintImages({ images, context }) {
  images.forEach((image) => 
        drawImageWithAnchor({ image, context }) // ✅ 앞서 구현한 함수를 사용합니다.
    )
}

 

이제 degree 값을 이용할 차례입니다.

각각의 이미지를 그리기전에 현재 context 정보를 저장합니다.

이는 회전된 이미지를 그린 이후에 회전되지 않은 context 로 쉽게 되돌리기 위함입니다.

 

function drawImage({ context, image }) {
    const { ref, sx, sy, width, height } = image

    context.save() // ✅ 현재 캔버스 context 를 저장합니다.
    context.drawImage(ref, sx, sy, width, height)
    context.restore() // ✅ 이전 context 로 되돌아갑니다.    
}

 

이제 이미지의 중점을 계산하고, 이 좌표값만큼 캔버스를 원점 (0, 0) 으로 이동시켜줍니다.

이렇게 하면 이제 캔버스의 원점은 이미지의 중점이 됩니다.

사각형의 중점은 회전각에 상관없이 항상 동일하기 때문에, 회전되지 않은 BoundingRect 를 사용합니다.

 

function drawImage({ context, image }) {
    const { ref, sx, sy, width, height } = image

    // ✅ 현재 캔버스 context 를 저장합니다.
    context.save()

    // ✅ 사각형의 중점을 구합니다.
    const vertices = getBoundingRectVertices(image)
    const center = getCenterOfBoundingRect(vertices)

    // ✅ offset 만큼 이동해서 캔버스의 원점을 사각형의 중점으로 변경합니다.
    context.translate(center.x, center.y)
    context.rotate(degreeToRadian(10)) // 💡 테스트를 위해 임시값을 넣습니다.

    // ✅ 다시 원래 위치로 이동시킵니다.
    context.translate(-center.x, -center.y)
    context.drawImage(ref, sx, sy, width, height)
    context.restore()
}

function degreeToRadian(degree) {
  return (degree * Math.PI) / 180
}

 

회전된 결과

 

하드코딩으로 10도 회전된 이미지를 그려보니 잘 나오네요!

 

📐 회전각 구하기

이제 마지막 한가지 작업이 남았습니다.

이전에는 고정된 각도로 회전된 이미지와 제어 앵커를 그렸는데,

이제 캔버스에 터치된 지점을 바탕으로 회전각을 구하는 과정을 알아보겠습니다.

이를 위해서는 벡터의 방위각을 구하면 됩니다.

 

 

고정 위치 A 를 기준으로 캔버스 선택 지점 B 에 대한 벡터를 사용합니다.

여기서 A 는 이미지의 회전 제어를 위한 캔버스 객체의 중점 좌표가 되겠네요.

 

 

function getBearingDegree(vector: Vector) {
  const thetaA = Math.atan2(vector.end.x - vector.begin.x, -vector.end.y + vector.begin.y)
  const theta = thetaA >= 0 ? thetaA : Math.PI * 2 + thetaA

  return Math.floor(radianToDegree(theta))
}

위 공식은 데카르트 좌표계를 기준으로 되어있기 때문에,

캔버스 좌표공간을 고려하여 x축 대칭 된 좌표값을 공식에 대입합니다.

 

✨ 최종 결과

 

📌 참고자료

CanvasRenderingContext2D: rotate() method - Web APIs | MDN

Find the bearing angle between two points in a 2D space