如何套用 2D 轉換

發行項
06/13/2023

注意

針對Windows 10上的應用程式，我們建議使用 Windows.UI.Composition API，而不是 DirectComposition。如需詳細資訊，請參閱使用視覺層將傳統型應用程式現代化。

本主題示範如何使用 Microsoft DirectComposition 將 2D 轉換套用至視覺效果。本主題中的範例會套用一組轉換：：

將視覺效果旋轉 180 度。
將視覺效果相應增加為其原始大小的三倍。
轉譯 () 視覺效果的原始位置右邊 150 圖元移動。

下列螢幕擷取畫面顯示套用 2D 轉換前後的視覺效果。

將一組 2d 轉換套用至視覺效果的結果

您所需了解的事情

技術

必要條件

C/C++
Microsoft Win32
元件物件模型 (COM)

指示

步驟 1：初始化 DirectComposition 物件

建立裝置物件和組合目標物件。
建立視覺效果、設定其內容，並將其新增至視覺化樹狀結構。

如需詳細資訊，請參閱如何初始化 DirectComposition。

步驟 2：建立轉換群組陣列

IDCompositionTransform *pTransforms[3];

步驟 3：建立轉換物件、設定其屬性，並將其新增至轉換群組陣列

使用 IDCompositionDevice：：CreateRotateTransform、 ：：CreateScaleTransform和 ：：CreateTranslateTransform 方法來建立轉換物件。
使用 IDCompositionRotateTransform、 IDCompositionScaleTransform和 IDCompositionTransform 介面的成員函式來設定轉換的屬性。
將轉換介面指標複製到轉換群組陣列。

IDCompositionRotateTransform *pRotateTransform = nullptr;
IDCompositionScaleTransform *pScaleTransform = nullptr;
IDCompositionTranslateTransform *pTranslateTransform = nullptr;
IDCompositionTransform *pTransformGroup = nullptr;

// Create the rotate transform.
hr = pDevice->CreateRotateTransform(&pRotateTransform);

if (SUCCEEDED(hr))
{
    // Set the center of rotation to the center point of the visual.
    hr = pRotateTransform->SetCenterX(BITMAP_WIDTH/2.0f);
    
    if (SUCCEEDED(hr)) {
        hr = pRotateTransform->SetCenterY(BITMAP_HEIGHT/2.0f);
    }

    // Set the rotate angle to 180 degrees.
    if (SUCCEEDED(hr)) {
        hr = pRotateTransform->SetAngle(180.0f);
    }

    // Add the rotate transform to the transform group array.
    pTransforms[0] = pRotateTransform;

    // Create the scale transform.
    if (SUCCEEDED(hr)) {
        hr = pDevice->CreateScaleTransform(&pScaleTransform);
    }
}

if (SUCCEEDED(hr))
{
    // Set the scaling origin to the upper-right corner of the visual.
    hr = pScaleTransform->SetCenterX(0.0f);
    if (SUCCEEDED(hr)) {
        hr = pScaleTransform->SetCenterY(0.0f);
    }

    // Set the scaling factor to three for both the width and height. 
    if (SUCCEEDED(hr)) {
        hr = pScaleTransform->SetScaleX(3.0f);
    }
    if (SUCCEEDED(hr)) {
        hr = pScaleTransform->SetScaleY(3.0f);
    }

    // Add the scale transform to the transform group array.
    pTransforms[1] = pScaleTransform;

    // Create the translate transform.
    if (SUCCEEDED(hr)) {
        hr = pDevice->CreateTranslateTransform(&pTranslateTransform);
    }
}

if (SUCCEEDED(hr))
{
    // Move the visual 150 pixels to the right.
    hr = pTranslateTransform->SetOffsetX(150.0f);
    if (SUCCEEDED(hr)) {
        hr = pTranslateTransform->SetOffsetY(0.0f);
    }

    // Add the translate transform to the transform group array.
    pTransforms[2] = pTranslateTransform;
}

步驟 4：建立轉換群組物件

呼叫 IDCompositionDevice：：CreateTransformGroup 方法來建立轉換群組物件。

if (SUCCEEDED(hr))
{
    // Create the transform group.
    hr = pDevice->CreateTransformGroup(pTransforms, 3, &pTransformGroup);
}

步驟 5：將轉換群組物件套用至視覺效果

使用 IDCompositionVisual：：SetTransform 方法，將視覺效果的 Transform 屬性與轉換群組物件產生關聯。

if (SUCCEEDED(hr))
{
    // Apply the transform group to the visual.
    hr = pVisual->SetTransform(pTransformGroup);
}

步驟 6：認可組合

呼叫 IDCompositionDevice：：Commit 方法，將視覺效果的更新認可至 DirectComposition 進行處理。套用 2D 轉換群組的結果會出現在目標視窗中。

if (SUCCEEDED(hr))
{
    // Commit the composition.
    hr = pDevice->Commit();
}

步驟 7：釋放 DirectComposition 物件

當您不再需要 2D 轉換物件時，請務必釋放這些物件群組。下列範例會呼叫應用程式定義的 SafeRelease 宏，以釋放轉換物件。

// Release the transform objects.
for (int i = 0; i < 3; i++)
{
    SafeRelease(&pTransforms[i]);
}

也請記得在應用程式結束之前釋放裝置物件、組合目標物件和視覺效果。

完整範例

#define BITMAP_WIDTH  80.0
#define BITMAP_HEIGHT 80.0

HRESULT DemoApp::ApplyTransformGroup(IDCompositionDevice *pDevice, 
                                     IDCompositionVisual *pVisual)
{
    HRESULT hr = S_OK;

    if (pDevice == nullptr || pVisual == nullptr)
        return E_INVALIDARG; 
    
    IDCompositionTransform *pTransforms[3];

    IDCompositionRotateTransform *pRotateTransform = nullptr;
    IDCompositionScaleTransform *pScaleTransform = nullptr;
    IDCompositionTranslateTransform *pTranslateTransform = nullptr;
    IDCompositionTransform *pTransformGroup = nullptr;

    // Create the rotate transform.
    hr = pDevice->CreateRotateTransform(&pRotateTransform);

    if (SUCCEEDED(hr))
    {
        // Set the center of rotation to the center point of the visual.
        hr = pRotateTransform->SetCenterX(BITMAP_WIDTH/2.0f);
        
        if (SUCCEEDED(hr)) {
            hr = pRotateTransform->SetCenterY(BITMAP_HEIGHT/2.0f);
        }

        // Set the rotate angle to 180 degrees.
        if (SUCCEEDED(hr)) {
            hr = pRotateTransform->SetAngle(180.0f);
        }

        // Add the rotate transform to the transform group array.
        pTransforms[0] = pRotateTransform;

        // Create the scale transform.
        if (SUCCEEDED(hr)) {
            hr = pDevice->CreateScaleTransform(&pScaleTransform);
        }
    }

    if (SUCCEEDED(hr))
    {
        // Set the scaling origin to the upper-right corner of the visual.
        hr = pScaleTransform->SetCenterX(0.0f);
        if (SUCCEEDED(hr)) {
            hr = pScaleTransform->SetCenterY(0.0f);
        }

        // Set the scaling factor to three for both the width and height. 
        if (SUCCEEDED(hr)) {
            hr = pScaleTransform->SetScaleX(3.0f);
        }
        if (SUCCEEDED(hr)) {
            hr = pScaleTransform->SetScaleY(3.0f);
        }

        // Add the scale transform to the transform group array.
        pTransforms[1] = pScaleTransform;

        // Create the translate transform.
        if (SUCCEEDED(hr)) {
            hr = pDevice->CreateTranslateTransform(&pTranslateTransform);
        }
    }

    if (SUCCEEDED(hr))
    {
        // Move the visual 150 pixels to the right.
        hr = pTranslateTransform->SetOffsetX(150.0f);
        if (SUCCEEDED(hr)) {
            hr = pTranslateTransform->SetOffsetY(0.0f);
        }

        // Add the translate transform to the transform group array.
        pTransforms[2] = pTranslateTransform;
    }

    if (SUCCEEDED(hr))
    {
        // Create the transform group.
        hr = pDevice->CreateTransformGroup(pTransforms, 3, &pTransformGroup);
    }

    if (SUCCEEDED(hr))
    {
        // Apply the transform group to the visual.
        hr = pVisual->SetTransform(pTransformGroup);
    }

    if (SUCCEEDED(hr))
    {
        // Commit the composition.
        hr = pDevice->Commit();
    }

    // Release the transform objects.
    for (int i = 0; i < 3; i++)
    {
        SafeRelease(&pTransforms[i]);
    }

    // Release the transform group pointer.
    SafeRelease(&pTransformGroup);

    return hr;
}

轉換

共用方式為

如何套用 2D 轉換

您所需了解的事情

技術

必要條件

指示

步驟 1：初始化 DirectComposition 物件

步驟 2：建立轉換群組陣列

步驟 3：建立轉換物件、設定其屬性，並將其新增至轉換群組陣列

步驟 4：建立轉換群組物件

步驟 5：將轉換群組物件套用至視覺效果

步驟 6：認可組合

步驟 7：釋放 DirectComposition 物件

完整範例

意見反應

其他資源

共用方式為

如何套用 2D 轉換

您所需了解的事情

技術

必要條件

指示

步驟 1：初始化 DirectComposition 物件

步驟 2：建立轉換群組陣列

步驟 3：建立轉換物件、設定其屬性，並將其新增至轉換群組陣列

步驟 4：建立轉換群組物件

步驟 5：將轉換群組物件套用至視覺效果

步驟 6：認可組合

步驟 7：釋放 DirectComposition 物件

完整範例

相關主題

意見反應

其他資源