C#에서 이미지 레이어 적용하기

포토샵이나 페인트닷넷과 같은 이미지 편집툴을 사용해본 사용자라면 레이어의 편리함과 유용성에 대해서 더이상의 설명이 필요없겠지만 레이어를 아직 경험하지 못한 사용자를 위하여 간단한 설명을 드리자면 투명한 셀로판지에 그린 여러장의 그림을 레이어에 비유하면 딱입니다. 각각의 셀로판지에는 다른 셀로판지의 그림과 관계없이 자유롭게 그림을 그릴 수 있지만 여러 셀로판지를 겹쳐서 하나의 그림을 만들어 내는 것처럼 하나의 이미지 파일에 여러 레이어를 두어 편집의 편리함과 유용성을 얻을 수 있고 이미지 파일의 재사용성을 극대화할 수 있는 장점이 있습니다. 

단순한 그림이라면 C#에서 굳이 레이어를 고민할 필요없이 이미지 편집툴에서 레이어로 편집하여 C#에서는 결과물만 사용하면 됩니다. 그런데 각 레이어 별로 별도의 변형이 가해진 다음 다시 합쳐져야 하는 경우라면 레이어를 검토해야만 합니다.

위의 그림을 예제로 설명하면 위의 예제는  0~50 사이의 값을 받아서 바늘을 적절하게 회전시켜 표시해야 하는데 그림에서 보듯이 바늘이 시계 바늘 처럼 원형으로 노출된 것이 아니라 바늘 위에 덮개가 씌워진 형태입니다. 이런 경우 바늘을 회전 시키기 위한 회전축이 덮개 아래로 위치하게 되면서 자연스러운 바늘을 움직임을 표현하려면 레이어 개념을 적용해야만 합니다.

위의 예제에서는 투명 배경을 적용한 이미지 3장을 준비합니다. 계기판 배경 한개, 바늘만 있는 이미지 한개, 그리고 덮개 이미지 한개입니다. 모두 투명 배경을 적용한 *.PNG로 저장합니다. 계기판 배경과 바늘을 겹치는 방법은 C#에서 이미지 자연스럽게 겹치기와 회전시키기를 참조합니다.

C#에서 레이어를 적용시키는 간단한 방법은 아래쪽 이미지 위에 투명 배경을 적용한 다른 이미지를 그리는(DrawImage) 방법입니다. 위의 예제에서는 바늘 이미지를 입력한 값에 따라 회전시킨 다음에 그 위에 덮개 이미지를 그리면 됩니다.

var newBitmap = new Bitmap(Properties.Resources.Volt_phandle.Width, Properties.Resources.Volt_phandle.Height);
newBitmap.SetResolution(Properties.Resources.Volt_phandle.HorizontalResolution, Properties.Resources.Volt_phandle.VerticalResolution);
var graphics = Graphics.FromImage(newBitmap);
graphics.TranslateTransform(250, 100);    // 중심점 이동
graphics.RotateTransform(-setval);        // 반시계 방향 회전
graphics.TranslateTransform(-250, -100);  // 중심점 복귀
graphics.DrawImage(Properties.Resources.Volt_phandle, new Point(0, 0)); // 바늘 레이어
graphics.ResetTransform();                // 변형 초기화
graphics.DrawImage(Properties.Resources.Volt_roof, new Point(0, 0));    // 덮개 레이어
phandle.Image = newBitmap;

바늘 이미지를 변형해서 그리는 과정은 C#에서 이미지 자연스럽게 겹치기와 회전시키기와 유사하지만 주의할 차이점은 바늘 레이어를 DrawImage로 그린 다음 ResetTransform()으로 변형 작업을 초기화 시켜준 것으로 이 작업 없이 덮개 레이어를 바로 DrawImage로 그리면 덮개 이미지 또한 바늘과 동일한 각도로 회전되는 결과를 가져옵니다. 변형을 위한 매트릭스를 초기화한 상태에서 투명 배경 이미지를 DrawImage하도록 주의하세요. 물론 여러 이미지를 겹칠 수도 있습니다. 아래의 이미지는 다른 각도로 조절한 결과입니다.