[Direct2D] ID2D1Effect : Affine transformation

지난 글에서 D2D Effect에 대해 알아보았습니다.

[Direct2D] ID2D1Effect 사용하기

이번 글에서는 D2D Efffect가 제공하는 기본 효과들 중, 아핀 변환 (Affine transformation)에 대해 알아보도록 하겠습니다.

 

이번 글은 지난 글에서 코드가 이어집니다.

[Direct2D] Device context 사용하기 (ID2D1DeviceContext
2D affine transform effect - Win32 apps | Microsoft Learn

또한, 위 MSDN에 기반하여 작성되었습니다.

 

---

 

1. Effect 생성 / 초기화

 

D2D Effect는 Device context에 의해 초기화되며, 이 때 적용활 효과에 대한 ID를 사용합니다.

아핀 변환은 다음과 같이 초기화 할 수 있습니다.

ComPtr<ID2D1Effect> affineTransformEffect;
myDirect2dContext->CreateEffect(
    CLSID_D2D12DAffineTransform,
    &affineTransformEffect
);

 

초기화 된 Effect객체에 효과를 적용할 이미지를 지정합니다.

ComPtr<ID2D1Bitmap> tmp = myCharacterBitmap->GetBitmap();
if (tmp) {
    affineTransformEffect->SetInput(0, tmp.Get());
    ...
}

코드의 tmp객체는 이전 글에서 사용한 비트맵 객체입니다.

 

2. 변환 적용하기

 

Direct2D Effect의 아핀 변환은 다음과 같이 수행할 수 있습니다.

D2D1_MATRIX_3X2_F transformMatrix;
affineTransformEffect->SetValue(
    D2D1_2DAFFINETRANSFORM_PROP_TRANSFORM_MATRIX,
    transformMatrix
);

위 코드는 transformMatrix로 정의된 아핀 변환을 수행하는 코드입니다.

 

3. 변환 행렬 손쉽게 생성하기

 

D2D Effect의 아핀 변환은 3*2의 행렬을 사용합니다.

변환 행렬은 직접 계산해서 수치를 기입할 수 있지만, D2D에서 제공되는 함수를 사용할 수 있습니다.

 

다음 함수들은 D2D1네임스페이스의 Matrix3x2F클래스의 함수입니다.

D2D1::Matrix3x2F::Identity();
D2D1::Matrix3x2F::Rotation(FLOAT angle, D2D1_POINT_2F center);
D2D1::Matrix3x2F::Scale(D2D1_SIZE_F size, D2D1_POINT_2F center);
D2D1::Matrix3x2F::Skew(FLOAT angleX, FLOAT angleY, D2D1_POINT_2F center);
D2D1::Matrix3x2F::Translation(D2D1_SIZE_F size);

• Identity는 단위행렬을 반환합니다.
• Rotation은 지정한 중점에서 지정한 각도만큼 회전하는 행렬을 반환합니다. 단위는 Degree입니다.
• Scale은 지정한 중점에서 지정한 값 만큼 크기를 조정하는 행렬을 반환합니다.
• Skew는 지정한 중점에서 지정한 값 만큼 이미지를 늘리는 행렬을 반환합니다.
• Translation은 지정한 값 만큼 이동시키는 행렬을 반환합니다.

각 함수들은 D2D1_MATRIX_3X2_F객체를 반환합니다.

이 객체는 또한 곱셈 연산자에 대한 오버로딩이 구현되어 있어, 여러 변환을 곱하여 한 번에 적용하는 것도 가능합니다.

 

4. 출력하기

 

D2D Effect의 출력은 이전 글과 동일하게, DrawImage함수로 수행할 수 있습니다.

myDirect2dContext->DrawImage(
    affineTransformEffect.Get(), 
    D2D1::Point2F(0.f, 0.f));

위 코드는 화면의 0, 0 좌표에 지정한 Effect를 출력하는 코드입니다.

 

---

 

위 내용을 기반으로, 이전 글의 DrawBitmap기반으로 작성되어있던 코드를 DrawImage로 변경했습니다.

Device context의 Transform을 변경하는 일 없이, 출력되는 이미지에 직접적으로 변환을 적용할 수 있어 코드가 직관적으로 되었습니다.

또한, DrawBitmap가 출력 범위를 요구하는 것에 반해, DrawImage는 출력 좌표 (왼쪽 위)를 요구하기 때문에, MyBitmap객체의 좌표 관련 코드도 수정되었습니다.

출력의 결과는 이전 글과 동일합니다.

이번 글의 코드는 다음 Github에서 확인하실 수 있습니다.

GitHub - ruru14/WinapiStudy: WinAPI및 DirectX를 공부하며, 간단한 운동 법칙을 적용해봅니다.

 

이번 글이 도움이 되셨기를 바랍니다.

감사합니다.