본 자료는
1. RotationPoints()와 ImageRotation() 비교
2. RotationPoints() 메서드 설명
3. ImageRotation() 메서드 설명
4. 예제 실행 화면
순서로 진행합니다.
SmartDraw와 SmartPictureBox를 사용하여 회전체 모양을 선/도형으로 표현하거나 이미지로 표현하는 방식을 설명합니다.
- 회전체가 선/도형인 경우 : SmartDraw의 RotationPoints() 메서드를 사용
- 회전체가 이미지인 경우 : SmartPictureBox의 ImageRotation() 메서드를 사용
회전체를 선/도형으로 표현하는 경우 이미지로 표현하는 것보다 대비 반응 속도가 빠릅니다.
| RotationPoints() | ImageRotation() | |
|---|---|---|
| 지원 컴포넌트 | SmartDraw | SmartPictureBox |
| 디자인 표현 정도 | 단순 디자인 표현 가능 | 세련된 디자인 표현 가능 |
| 반응 속도 | 반응 속도 빠름 | 반응 속도 느림 |
| 구현 난이도 | ImageRotation()에 비해 어려움 | RotationPoints()에 비해 쉬움 |
| RotationPoints() | ImageRotation() | |
|---|---|---|
| 지원 컴포넌트 |
SmartDraw | SmartPictureBox |
| 디자인 표현 정도 |
단순 디자인 표현 가능 |
세련된 디자인 표현 가능 |
| 반응 속도 | 반응 속도 빠름 | 반응 속도 느림 |
| 구현 난이도 |
ImageRotation()에 비해 어려움 |
RotationPoints()에 비해 쉬움 |
※ 디자인 표현 정도와 반응 속도를 고려하여 표현 방식을 RotationPoints() 또는 ImageRotation() 중에 선택하여 사용하시기 바랍니다.
2. RotationPoints() 메서드 설명입력된 여러 개의 좌표를 기준점 중심으로 설정된 각도만큼 좌표들의 회전된 좌표
Point[] RotationPoints(Point[] inPoints, Point centerPoint, double fAngle)
인자 설명
- Point[] inPoints : 선 또는 도형 모양을 그릴 수 있는 X,Y좌표가 저장된 배열값
- Point centerPoint : 선 또는 도형 모양의 기준점 X,Y좌표
- double fAngle : 선 또는 도형이 회전할 경우 변화되는 각도
- Point[] : 입력 좌표의 회전된 좌표들을 리턴합니다.
private Point[] m_Needle;
private Point[] m_NeedleOut;
private Point m_NeedleCenter;
private double m_fAngle = 0.0;
private void Form1_Load(object sender, EventArgs e)
{
smartDraw1.Width = 387;
smartDraw1.Height = 372;
m_Needle = new Point[4];
m_NeedleCenter.X = 191;
m_NeedleCenter.Y = 186;
m_Needle[0].X = 191;
m_Needle[0].Y = 165;
m_Needle[1].X = 196;
m_Needle[1].Y = 186;
m_Needle[2].X = 191;
m_Needle[2].Y = 286;
m_Needle[3].X = 186;
m_Needle[3].Y = 186;
private void NeedRotationDraw()
{
smartDraw1.Erase();
smartDraw1.SetPenStyle(Color.LightGray, 1);
smartDraw1.SetBrushStyle(Color.DarkGray);
smartDraw1.Polygon(m_NeedleOut);
smartDraw1.SetPenStyle(Color.DarkRed, 1);
smartDraw1.SetBrushStyle(Color.DarkRed);
smartDraw1.Circle(m_NeedleCenter.X + 1, m_NeedleCenter.Y + 1, 8);
- 초기상태의 회전체
- 회전체를 시계 방향(CW)으로 회전할 때
// 초기 상태에서 90도만큼 시계 방향으로 회전
m_fAngle -= 90.0; - 회전체를 반시계 방향(CCW)으로 회전할 때
// 초기 상태에서 -90도만큼 반시계 방향으로 회전
m_fAngle += 90.0;
중심점(중심축) 설명
사용자가 그린 선 또는 도형은 기준점(centerPoint)을 중심으로 회전(Rotate)합니다.
-
X, Y 좌표가 저장된 배열값으로 표현된 도형
-
기준점을 중심으로 시계/반시계 방향 회전 가능
3. ImageRotation() 메서드 설명
회전 이미지, 배경 이미지, 회전 이미지의 중심 좌표, 옵셋 정보를 바탕으로 사용자가 설정한 각도만큼 이미지가 회전되어 표현됩니다. 결과는 배경 이미지에 출력됨.
• void ImageRotation(Bitmap rotateImage, int iCenterX, int iCenterY, int iOffsetX, int iOffsetY, double degrees)
• void ImageRotation(Image rotateImage, int iCenterX, int iCenterY, int iOffsetX, int iOffsetY, double degrees)
• void ImageRotation(Bitmap rotateImage, Bitmap backResultImage, int iCenterX, int iCenterY, int iOffsetX, int iOffsetY, double degrees)
private double m_fAngle1 = 0.0;
private double m_fAngle2 = 0.0;
private Bitmap m_imgRotate1;
private Bitmap m_imgRotate2;
private Bitmap imgBackResult;
private void Form1_Load(object sender, EventArgs e)
{
// 배경 이미지를 설정
smartPictureBox1.Image = Resource1.img_BackResult;
// 회전 이미지 객체 생성
Bitmap imgRotate1 = new Bitmap(Resource1.img_Rotation1);
Bitmap imgRotate2 = new Bitmap(Resource1.img_Rotation2);
// 배경 이미지 객체 생성
Bitmap imgBackResult = new Bitmap(Resource1.img_BackResult);
// 회전체가 하나일 경우
private void SingleRotateButton_Click(object sender, EventArgs e)
{
smartPictureBox1.ImageRotation(imgRotate, imgRotate.Width / 2, imgRotate.Height / 2, 48, 48, m_fAngle);
// 회전체가 두개 이상일 경우
private void MultiRotateButton_Click(object sender, EventArgs e)
{
m_fAngle1 += 5;
smartPictureBox1.ImageRotation(imgRotate1, imgBackResult, imgRotate1.Width / 2, imgRotate1.Height / 2, 48, 48, m_fAngle1);
smartPictureBox1.Image = imgBackResult;
m_fAngle2 += 10;
smartPictureBox1.ImageRotation(imgRotate2, imgBackResult, imgRotate2.Width / 2, imgRotate2.Height / 2, 48, 48, m_fAngle2);
smartPictureBox1.Image = imgBackResult;
설정된 인자값
-
• Bitmap rotateImage : 회전 이미지
-
• Bitmap backResultImage : 배경 이미지
(※ 회전체가 여러 개인 경우에만 사용하는 인자로 회전체가 하나인 경우에는 배경 이미지는 Image 속성에 설정합니다.)
-
• int iCenterX : 회전 이미지의 중심 기준점 X좌표
• int iCenterY : 회전 이미지의 중심 기준점 Y좌표
-
• int iOffsetX : 옵셋 X좌표값(배경 이미지 좌측 상단의 모서리가 시작점)
• int iOffsetY : 옵셋 Y좌표값(배경 이미지 좌측 상단의 모서리가 시작점)
옵셋값이 0,0인 경우 상단 그림의 좌측 녹색 빈상자 모양에 rotateImage가 위치하며 회전 이미지를 배경 이미지의 중앙에 위치시키기 위해 옵셋값을 조정하여 배경 이미지의 중앙에 배치할 수 있음
회전 이미지(rotateImage)에서 녹색영역이 마스킹 처리되는 부분이며 배경 이미지 위에 투명 처리되어 표현됩니다.
[STEP-1] 투명 처리할 배경에 마스크 영역을 만들어 줍니다.
[STEP-2] 투명 처리할 마스크 영역의 색상의 이미지에 사용되지 않는 색상으로 채웁니다.
[STEP-3] 마스크 영역과 이미지의 경계 부분을 안티앨리어싱 효과를 줍니다. 경계 부분을 배경 이미지에 적용되는 대표적인 컬러의 중간값으로 주는 경우 경계선이 가장 자연스럽게 표현됩니다.
-
• 초기 상태의 회전체
-
• double degrees : 회전 이미지가 회전할 경우 변화되는 각도
- • 회전체를 시계 방향(CW)으로 회전할 때
// 초기 상태에서 45도만큼 시계 방향으로 회전
m_degree -= 45; - • 회전체를 반시계 방향(CCW)으로 회전할 때)
// 초기 상태에서 -45도만큼 반시계 방향으로 회전
m_degree += 45;
4. 예제 실행 화면
