C#에서 이미지 자연스럽게 겹치기와 회전시키기

C#에서 이미지를 겹쳐서 보이게 할때 위에 있는 이미지와 아래에 있는 이미지가 자연스럽게 겹쳐서 보이게 하려면 위의 있는 이미지의 배경을 투명하게 제작할 필요성이 있습니다. 배경이 투명한 이미지 만들기는 페인트닷넷으로 투명한 배경의 이미지 만들기를 참조하세요. *.PNG, *.GIF등의 투명한 배경을 지원하는 이미지 파일을 제작했다면 아래의 그림과 같이 프로젝트의 리소스 파일에 이미지를 추가합니다.

예제의 코딩 의도는 계기판을 구현하는 것으로 계기판 바탕 이미지 위에 바늘 이미지를 올리고 입력된 각도에 따라 바늘을 회전시켜 보이는 것입니다.

■ 투명 배경의 이미지 겹치기

두개의 이미지를 모두 도구상자의 PictureBox 컨트롤을 통해서 각각 생성하고 프로젝트 리소스 파일에 등록해 두었던 이미지를 등록합니다. 예제에서는 아래 이미지를 picbox, 위의 이미지를 pin이라는 이름으로 등록했습니다. 윈도우 폼 클래스의 생성자에 있는 InitializeComponent() 다음에 위쪽에 겹친 이미지의 Parent로 아래쪽 이미지의 PictureBox를 지정하면 두 이미지가 자연스럽게 겹쳐 보일 수 있습니다.

InitializeComponent();
pin.Parent = picbox;

주의할 점은 위에 있는 이미지의 배경색이 아래의 그림과 같이 투명(Transparent)으로 되어 있는지 확인해야 합니다.

■ 이미지 회전 시키기

var newBitmap = new Bitmap(Properties.Resources.amp_meter_handle.Width, Properties.Resources.amp_meter_handle.Height);
newBitmap.SetResolution(Properties.Resources.amp_meter_handle.HorizontalResolution, Properties.Resources.amp_meter_handle.VerticalResolution);
var graphics = Graphics.FromImage(newBitmap);
graphics.TranslateTransform(120, 153);
graphics.RotateTransform(setval);
graphics.TranslateTransform(-120, -153);
graphics.DrawImage(Properties.Resources.amp_meter_handle, new Point(0, 0));
pin.Image = newBitmap;

이미지 회전은 System.Drawing.Graphics 클래스를 사용하여 수행합니다. 이미지 회전은 원본 이미지(프로젝트 리소스)의 크기와 해상도를 바탕으로한 Bitmap 인스턴스를 생성하는 것으로 시작합니다. 생성한 비트맵 인스턴스로 그래픽스 인스턴스를 만들고 바늘의 회전 중심점을 지정합니다. 시계바늘처럼 이미지의 정중앙에 중심점이 있다면 이미지 폭(Width)의 중간값과 깊이(Height)의 중간 값을 TranslateTransform 함수로 지정하면 되지만 예제의 경우에는 바늘의 회전축이 하단부에 있으므로 해당 위치를 직접 지정하는(픽셀 위치) 방법을 사용했습니다. 참고로 보통 원점 또는 중심점은 이미지의 왼쪽 상단(Left Top)에 위치하므로  그냥 회전시키면 원하는 결과를 얻을 수 없습니다. 

원점을 바늘의 회전축으로 이동시켰으면 지정한 각도 값을 RotateTransform 함수에 전달하여 이미지를 회전시키고 직전에 중심점을 이동시키기 위하여 TranslateTransform에 전달했던 값의 음수 값을  다시 TranslateTransform으로 전달해서 중심점을 원상 복구하여 변환 및 회전 과정 준비를 끝냅니다.  변환 및 회전 준비를 끝냈으면 DrawImage로 새로운 비트맵을 만든 다음 생성한 비트맵을 PictureBox의 새로운 이미지로 지정하면 됩니다. 실제 이미지를 그리는 과정인 DrawImage 대신 Graphics 클래스에서 제공하는 다양한 Draw* 함수로 선, 곡선, 호, 아이콘등 다양한 작도가 가능하고 이 과정에서 그려지는 이미지는 앞서 준비한 변환 및 회전 매트릭스를 통해서 이미지 변형과 동일하게 자연스럽게 변형됩니다.