Develop/canvas

28. transform() - 회전

GuriZzang 2015. 8. 10. 15:33

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.


.transform()

오브젝트를 회전 시켜 줍니다.

  • .transform(a, b, c, d, e, f)
  • 인자 : a
  • 설명 : scale-x 가로 확대
  • 인자 : b
  • 설명 : skew-x 세로 회전
  • 인자 : c
  • 설명 : skew-y 가로 회전
  • 인자 : d
  • 설명 : scale-y 가로 확대
  • 인자 : e
  • 설명 : translate-x 가로 이동
  • 인자 : f
  • 설명 : translate-x 세로 이동



먼저 회전을 시킬때 이거저거 알아야 할게 너무 많지만.. 2차원에 대한 좌표변환 같은건 아직 이해가 안되기 때문에..

http://egloos.zum.com/aslike/v/2898232

정리가 된 블로그를 참고 하시면 될거 같습니다.


인자도 많고 소스를 보자니 cos(), sin() 등이 등장하고.. 초보자가 이해하기에는 느끼기에는 너무 어렵네요.


그래서 이해한 대로 그림으로 만들어 보았습니다.



먼저 인자의 순서대로 그림의 1~4번까지 설명입니다.

반투명 빨간색 바는 아무것도 적용되지 않은 fillRect( 10,10,100,10 ) 사각형 입니다.

transform( cos,sin,-sin,cos,0,0 ); 을 적용 했을때 보라색 사각형처럼 회전을 하게 됩니다.

( 설명 순서는 실제 구현순서가 아닌 이해하기 쉽게 나열한것입니다. )

크게 보자면 .scale()로 확대축소를 한 후 각도에 맞게 회전을 줍니다.


2. 인자 b : sin - Vertical skewing

y축에서 원주율 (2번 빨간선) 만큼 회전을 시켜줍니다. 이때 3번의 선으로 된 사각형처럼 회전이 일어나는데. 끝 모양의 각도가 처음 사각형의 모양처럼 직각으로 남아 있습니다. 물론 회전을해도 면적이 없기때문에 사각형이 보이지는 않습니다.


1. 인자 a : cos - Horizontal scailing

이것은 scale에서 보셨든  객체를 x와 y의 값으로 크기 변형을 시켜주는 함수 입니다. 일단 1번의 x좌표만큼의 길이를 구합니다.

(구형은 회전이 되었을때 x와 y의 좌표가 이동하기 때문에 cos으로 길이를 구해줍니다.)


4. 인자 d : cos - Vertical scaling

scale을 적용할때 x값과 y값이 필요하기 때문에 1번과 4번의 값을 cos으로 구해줍니다.

비로소 scale의 x좌표와 y좌표가 구해지고 그만큼 크기를 변형 시켰습니다.

그 결과는 3번의 선으로된 사각형과 같습니다.


3. 인자 c : -sin - Vertical skewing

보라색 사각형 처럼 끝의 각도를 변형시키기 위해 밑면을 마이너스값 -sin으로 회전 시켜줍니다.


아직 복잡한 수식의 매트릭스를 이해하지 못했기 때문에 나름 원리를 찾는다고 찾았는데 맞는건지 모르겠습니다.

밑의 소스는 원의 각을 12개로 나누고 for문으로 회전을 시키는 예제 입니다.



Source 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
 
  var sin = Math.sin(Math.PI/6);
  var cos = Math.cos(Math.PI/6);
  ctx.translate(100, 100);
  var c = 0;
  for (var i=0; i <= 12; i++) {
    c = Math.floor(255 / 12 * i);
    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
    ctx.fillRect(0, 0, 100, 10);
    ctx.transform(cos, sin, -sin, cos, 0, 0);
  }
   
  ctx.setTransform(-1, 0, 0, 1, 100, 100);
  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
  ctx.fillRect(0, 50, 100, 100);
}



Demo

'Develop > canvas' 카테고리의 다른 글

30. strokeText() - 라인으로 글쓰기  (0) 2015.08.10
29. fillText() - 글자그리기  (0) 2015.08.10
27. scale() - 크기확대/축소  (0) 2015.08.10
26. rotate() - 회전하기  (0) 2015.08.10
25. translate() - 위치이동  (0) 2015.08.10