CanvasRenderingContext2D.setTransform 설명 > 메모

CanvasRenderingContext2D.setTransform 설명

• 정의: 2D 캔버스 컨텍스트(ctx)의 현재 변환 행렬을 “덮어쓰기”로 설정합니다. 이후의 모든 그리기 연산에 적용됩니다.
• 시그니처
  • ctx.setTransform(a, b, c, d, e, f)
  • ctx.setTransform(DOMMatrix) 또는 ctx.setTransform(SVGMatrix)

매개변수 의미

• a, b, c, d, e, f는 2×3 행렬 요소로, 점 변환은 다음과 같습니다:
  • x′= a*x + c*y + e
  • y′= b*x + d*y + f
• 직관적으로:
  • a, d: 스케일/회전의 주 대각 요소
  • b, c: 회전/기울이기(shear)
  • e, f: 평행이동(translate)

핵심 포인트

• 덮어쓰기: 기존 변환에 누적하지 않고, 지정한 행렬로 “바로 교체”합니다.
  - 누적 변환이 필요하면 ctx.transform(...)을 사용하세요.
• 초기화: ctx.setTransform(1, 0, 0, 1, 0, 0)은 단위 행렬, 즉 변환 초기화와 동일합니다.
  - 최신 표준에서는 ctx.resetTransform()도 제공됩니다.
• 상태 스택: ctx.save()/ctx.restore()와 함께 사용하면 구간별로 변환을 안전하게 적용/복구할 수 있습니다.

자주 쓰는 패턴 예시

// 단위 행렬로 초기화
ctx.setTransform(1, 0, 0, 1, 0, 0);

// 특정 위치(100, 80)에 45도 회전, 2배 스케일을 한 번에 설정
const angle = Math.PI / 4;
const cos = Math.cos(angle), sin = Math.sin(angle);
const sx = 2, sy = 2;
ctx.setTransform(
  cos * sx,  // a
  sin * sx,  // b
  -sin * sy, // c
  cos * sy,  // d
  100,       // e (translate x)
  80         // f (translate y)
);
ctx.fillRect(-25, -25, 50, 50); // 원점 기준 도형을 위치/회전/스케일 적용해 그리기

DOMMatrix 사용 예시

const m = new DOMMatrix()
  .translate(100, 80)
  .rotate(45)        // 단위: 도(deg)
  .scale(2, 2);
ctx.setTransform(m);

팁과 주의사항

• 누적과의 차이: 기존 상태에 이어서 변환하려면 transform(누적), 처음부터 정확히 세팅하려면 setTransform(덮어쓰기).
• 그리기 순서: 변환 설정 → 그리기. 변환은 설정 이후에만 적용됩니다.
• 성능: 잦은 변환 변경은 비용이 있으니, 필요한 구간에만 설정하고 save/restore를 활용하세요.