Cara menerapkan transformasi 2D

Nota

Untuk aplikasi di Windows 10, sebaiknya gunakan WINDOWS.UI.Composition API alih-alih DirectComposition. Untuk informasi selengkapnya, lihat Memodernisasi aplikasi desktop Anda menggunakan lapisan Visual.

Topik ini menunjukkan cara menerapkan transformasi 2D ke visual dengan menggunakan Microsoft DirectComposition. Contoh dalam topik ini menerapkan sekelompok transformasi yang:

Putar visual sebesar 180 derajat.
Tingkatkan skala visual hingga tiga kali ukuran aslinya.
Terjemahkan (pindahkan) visual 150 piksel ke kanan posisi aslinya.

Cuplikan layar berikut menunjukkan visual sebelum dan sesudah menerapkan transformasi 2D.

hasil dari menerapkan grup transformasi 2d ke visual

Apa yang perlu Anda ketahui

Teknologi

DirectComposition
Grafik Direct3D 11
DirectX Graphics Infrastructure (DXGI)

Prasyarat

C/C++
Microsoft Win32
Model Objek Komponen (COM)

Peraturan

Langkah 1: Menginisialisasi objek DirectComposition

Buat objek perangkat dan objek target komposisi.
Buat visual, atur kontennya, dan tambahkan ke pohon visual.

Untuk informasi selengkapnya, lihat Cara menginisialisasi DirectComposition.

Langkah 2: Buat array grup transformasi

IDCompositionTransform *pTransforms[3];

Langkah 3: Buat objek transformasi, atur propertinya, dan tambahkan ke array grup transformasi

Gunakan IDCompositionDevice::CreateRotateTransform, ::CreateScaleTransform, dan ::CreateTranslateTransform metode untuk membuat objek transformasi.
Gunakan fungsi anggota IDCompositionRotateTransform, IDCompositionScaleTransform, dan antarmuka IDCompositionTranslateTransform untuk mengatur properti transformasi.
Salin penunjuk antarmuka transformasi ke array grup transformasi.

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;
}

Langkah 4: Membuat objek grup transformasi

Panggil metodeIDCompositionDevice::CreateTransformGroup untuk membuat objek grup transformasi.

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

Langkah 5: Terapkan objek grup transformasi ke visual

Gunakan metode IDCompositionVisual::SetTransform untuk mengaitkan properti Transformasi visual dengan objek grup transformasi.

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

Langkah 6: Terapkan komposisi

Panggil metode IDCompositionDevice::Commit untuk menerapkan pembaruan visual ke DirectComposition untuk diproses. Hasil penerapan grup transformasi 2D muncul di jendela target.

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

Langkah 7: Bebaskan objek DirectComposition

Pastikan untuk membebaskan grup objek transformasi 2D ketika Anda tidak lagi membutuhkannya. Contoh berikut memanggil makro SafeRelease yang ditentukan aplikasi untuk membebaskan objek transformasi.

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

Ingat juga untuk membebaskan objek perangkat, objek target komposisi, dan visual sebelum aplikasi Anda keluar.

Contoh lengkap

#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;
}

Transformasi

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-06-12