Konsep dasar

  • Artikel

Catatan

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 memberikan gambaran umum tentang konsep dasar Microsoft DirectComposition. Hal ini berisi bagian-bagian berikut:

Komposisi

DirectComposition mendefinisikan komposisi sebagai kumpulan bitmap yang digabungkan dan dimanipulasi dengan menerapkan berbagai transformasi, efek, dan animasi untuk menghasilkan hasil visual dalam UI aplikasi. DirectComposition hanya berfungsi dengan konten bitmap; tidak mendukung vektor atau teks. DirectComposition tidak menyediakan konten bitmap. Sebaliknya menyediakan antarmuka di mana pengguna dapat menggambar dengan D2D, DXGI, atau mengunggah konten tekstur mereka sendiri.

Aplikasi DirectComposition membuat dua set objek untuk menyusun adegan: bitmap yang disusung bersama-sama, dan visual yang menentukan hubungan spasial di antara bitmap. Untuk informasi selengkapnya tentang objek bitmap yang didukung oleh DirectComposition, lihat Objek bitmap.

Visual

Visual (atau objek visual) adalah elemen dasar DirectComposition. Mereka adalah blok penyusun dasar yang Anda gunakan untuk membuat komposisi dan animasi di antarmuka pengguna aplikasi Anda.

Dalam istilah pemrograman, visual adalah objek yang memiliki sekumpulan properti, dan mengekspos antarmuka yang Anda gunakan untuk mengatur nilai properti. Properti Konten visual mengaitkan bitmap tertentu dengan visual, sementara properti lain mengontrol bagaimana DirectComposition memosisikan dan memanipulasi visual saat dirender ke layar.

Untuk informasi selengkapnya, lihat Properti Visual.

Pohon visual

DirectComposition membuat komposisi dari koleksi hierarki objek visual yang disebut pohon visual. Visual di akar pohon disebut visual akar dan dapat memiliki satu atau beberapa visual anak yang terkait dengannya. Visual anak dapat memiliki satu atau beberapa visual anak sendiri. Visual apa pun yang memiliki visual anak terkait disebut visual induk, dan semua visual anak yang berbagi induk yang sama disebut visual saudara. Visual tertentu bersama dengan semua visual turunan dan turunannya disebut subtree visual.

Lokasi visual di pohon membantu menentukan posisi layar dan urutan z relatif terhadap visual lain dalam komposisi. Visual akar diposisikan relatif terhadap sudut kiri atas area klien jendela target tempat komposisi dirender. Semua visual anak diposisikan relatif terhadap sudut kiri atas visual induknya (atau visual yang ditentukan oleh properti TransformParent), dan selalu muncul di depan induknya dalam urutan z.

Ilustrasi berikut menunjukkan komposisi visual dan struktur pohon visual yang digunakan untuk menghasilkan komposisi. Visual 1 adalah visual akar dan juga merupakan induk dari Visual 2 dan 3 anak, yang merupakan visual saudara. Visual 3 memiliki dua visual anak sendiri, Visual 4 dan 5. Bersama-sama, Visuals 3 hingga 5 membentuk subtree visual.

komposisi visual dan pohon visual yang sesuai

Visual induk mempertahankan daftar visual turunannya yang diurutkan. Ketika visual saudara diposisikan sedemikian rupa sehingga tumpang tindih satu sama lain, DirectComposition mengatur urutan z saudara kandung berdasarkan urutan di mana mereka muncul dalam daftar anak visual induk. Saudara kandung yang muncul kemudian dalam daftar ditempatkan di depan semua saudara kandung yang muncul sebelumnya dalam daftar. Ilustrasi berikut menunjukkan urutan z visual anak yang tumpang tindih.

urutan z visual anak yang tumpang tindih

Properti objek visual

Objek visual mengekspos sekumpulan properti yang memungkinkan Anda mengatur konten bitmap untuk visual, dan untuk mengontrol bagaimana DirectComposition memposisikan dan memanipulasi konten visual. Bagian berikut menjelaskan setiap properti secara rinci.

Properti konten

Properti Konten visual menentukan konten bitmap yang terkait dengan visual. Ini adalah bitmap yang digunakan DirectComposition saat Anda menyertakan visual dalam komposisi.

Anda mengatur properti Konten visual dengan memanggil metode IDCompositionVisual::SetContent .

Untuk informasi selengkapnya tentang jenis konten bitmap yang didukung oleh DirectComposition, lihat Objek bitmap.

Properti klip

Properti Klip visual menentukan area persegi panjang yang disebut wilayah kliping (atau persegi panjang klip). Saat visual dirender, hanya bagian visual yang berada di dalam wilayah kliping yang ditampilkan, sementara konten apa pun yang meluas di luar wilayah kliping dipotong (yaitu, tidak ditampilkan). DirectComposition mendukung wilayah kliping yang memiliki sudut bulat atau kuadrat.

Anda mengatur properti Klip visual dengan memanggil metode IDCompositionVisual::SetClip .

Untuk informasi selengkapnya, lihat Pengklipan.

Properti BorderMode

Properti BorderMode menentukan cara menyusun tepi bitmap dan klip yang terkait dengan visual ini, atau dengan visual dalam subtree yang berakar pada visual ini.

Mode batas memengaruhi bagaimana tepi bitmap disusam ketika bitmap diubah sed sehingga tepi tidak selaras dengan koordinat bilangan bulat. Ini juga memengaruhi bagaimana konten dipotong di sudut klip yang memiliki sudut bulat, dan di tepi klip yang diubah sed sehingga tepi tidak selaras dengan koordinat bilangan bulat.

Untuk informasi selengkapnya, lihat IDCompositionVisual::SetBorderMode.

Properti BitmapInterpolationMode

Properti BitmapInterpolationMode memberi tahu DirectComposition cara menyusun bitmap ketika diubah sedemikian rumit sehingga tidak ada korespondensi satu-ke-satu antara piksel dalam bitmap dan piksel di layar.

Anda mengatur properti BitmapInterpolationMode dari visual dengan memanggil metode IDCompositionVisual::SetBitmapInterpolationMode .

Properti CompositeMode

Properti CompositeMode memberi tahu DirectComposition cara memadukan konten bitmap visual dengan target render. Untuk deskripsi mode komposit yang didukung, lihat DCOMPOSITION_COMPOSITE_MODE.

Anda mengatur properti CompositeMode dari visual dengan memanggil metode IDCompositionVisual::SetCompositeMode .

Properti OffsetX dan OffsetY

Properti OffsetX dan OffsetY memberi tahu DirectComposition tempat memposisikan visual secara horizontal dan vertikal. Mereka mendefinisikan posisi tetap dua dimensi dari mana semua transformasi dan efek untuk visual dihitung.

Untuk visual akar, properti OffsetX dan OffsetY menentukan koordinat x dan koordinat y titik yang relatif terhadap sudut kiri atas jendela yang menghosting visual. Untuk visual anak, koordinat relatif terhadap sudut kiri atas induk atau, jika properti TransformParent ditentukan, sudut kiri atas visual yang ditentukan. Saat visual dirender, visual diposisikan sed sehingga sudut kiri atas visual bertepatan dengan koordinat yang ditentukan.

Anda mengatur properti OffsetX dan OffsetY visual dengan memanggil metode IDCompositionVisual::SetOffsetX dan SetOffsetY .

Properti efek

Properti Efek memungkinkan Anda menentukan efek, atau grup efek, yang akan memodifikasi bagaimana visual dan subtreenya disusun. Misalnya, Anda dapat menentukan efek yang mengontrol opasitas visual, memadukan visual dengan bitmap lain dengan berbagai cara, dan menerapkan transformasi perspektif ke visual.

Anda mengatur properti Efek visual dengan memanggil metode IDCompositionVisual::SetEffect .

Untuk informasi selengkapnya, lihat Efek.

Properti transformasi

Properti Transformasi menentukan transformasi dua dimensi (2D), atau grup transformasi 2D, agar DirectComposition dapat dilakukan pada visual. Transformasi (atau transformasi) adalah operasi yang memodifikasi sistem koordinat visual relatif terhadap induknya, atau relatif terhadap visual yang ditentukan oleh properti TransformParent. Anda dapat menggunakan transformasi untuk mengubah posisi, ukuran, atau sifat visual dengan memindahkannya ke lokasi lain (terjemahan), membuatnya lebih besar atau lebih kecil (penskalaan), mengubahnya (rotasi), mendistorsi bentuknya (condong), dan sebagainya.

Anda mengatur properti Transformasi visual dengan memanggil metode IDCompositionVisual::SetTransform .

Untuk mengetahui informasi selengkapnya, lihat Transformasi.

Properti TransformParent

Sistem koordinat visual dimodifikasi oleh properti OffsetX, OffsetY, dan Transformasi. Biasanya, properti ini mendefinisikan sistem koordinat visual relatif terhadap induk langsungnya. Untuk menggunakan beberapa visual selain induk sebagai dasar untuk sistem koordinat visual anak, gunakan properti TransformParent untuk menentukan visual yang berbeda sebagai "induk" untuk tujuan transformasi.

Anda mengatur properti TransformParent dari visual dengan memanggil metode IDCompositionVisual::SetTransformParent .

Objek perangkat

Untuk menggunakan DirectComposition, Anda harus membuat dan memanipulasi berbagai objek Model Objek Komponen (COM). Objek pertama yang perlu Anda buat adalah objek perangkat DirectComposition karena berfungsi sebagai pabrik untuk membuat semua objek lain yang digunakan dalam komposisi.

Anda membuat objek perangkat dengan memanggil fungsi DCompositionCreateDevice , yang mengembalikan penunjuk antarmuka IDCompositionDevice . Antarmuka ini mengekspos sekumpulan metode yang Anda gunakan untuk membuat objek visual, objek klip, objek animasi, mengubah objek, objek efek, dan sebagainya.

Objek perangkat melayani satu tujuan lain selain menjadi pabrik untuk membuat objek lain. Ini mengekspos metode yang disebut Commit yang meneruskan pohon visual ke DirectComposition untuk diproses. Untuk informasi selengkapnya, lihat Komposisi Transaksi.

Ingatlah bahwa, meskipun Anda dapat membuat beberapa instans objek perangkat di aplikasi Anda, semua objek yang Anda gunakan dalam komposisi tertentu harus dibuat oleh objek perangkat yang sama—dengan satu pengecualian: Anda dapat menggabungkan objek visual dari objek perangkat yang berbeda di pohon visual yang sama. Ketika Anda melakukannya, DirectComposition memperlakukan pohon visual seperti biasanya, kecuali bahwa perubahan pada objek visual tertentu di pohon hanya berlaku ketika metode Penerapan dipanggil pada objek perangkat yang membuat objek visual.

Kemampuan untuk menggunakan visual dari perangkat yang berbeda di pohon visual yang sama memungkinkan beberapa utas untuk membuat dan memanipulasi satu pohon visual sambil mempertahankan dua perangkat independen yang dapat digunakan untuk melakukan perubahan secara asinkron. Untuk informasi selengkapnya, lihat Pohon Visual Lintas Perangkat.

Jendela target komposisi

Pohon visual harus terikat ke jendela sebelum visual pohon dapat ditampilkan di layar. Jendela, yang disebut jendela target komposisi, dapat berupa jendela tingkat atas atau jendela anak. Juga, jendela target komposisi bisa menjadi jendela berlapis; artinya, ia dapat memiliki gaya jendela WS_EX_LAYERED .

DirectComposition memungkinkan aplikasi untuk mengikat maksimal dua pohon visual ke setiap jendela. Pohon visual termasuk yang terdiri di atas jendela itu sendiri, tetapi di belakang semua jendela anak jendela, dan yang lain yang terdiri di atas jendela dan di atas jendela anak. Dengan kata lain, setiap jendela memiliki empat lapisan konseptual, dan semua lapisan dipotong ke wilayah jendela target yang terlihat. Ilustrasi berikut menunjukkan empat lapisan konseptual jendela.

lapisan konseptual jendela

Komposisi transaksi

DirectComposition menggunakan model transaksi di mana Anda membuat serangkaian perubahan batch pada visual lalu "menerapkan" set ke DirectComposition untuk diproses sekaligus. Anda dapat mengubah objek visual DirectComposition yang sama dan menerapkan perubahan berapa kali. Ketika Desktop Window Manager (DWM) mengambil batch, ia mengambil semua batch yang tertunda dan menerapkannya ke bingkai berikutnya sesuai urutan penerapannya.

Semua perubahan dalam satu penerapan dijamin akan diterapkan ke satu bingkai. Karena DWM mengumpulkan batch sekali per bingkai, Anda dapat memodifikasi objek tertentu hanya sekali per bingkai. Penerapan berikutnya yang memodifikasi objek yang berbeda mungkin juga diterapkan ke bingkai saat ini, tetapi DirectComposition tidak menjamin bahwa perubahan akan terjadi dalam bingkai yang sama.

Metode IDCompositionSurface::BeginDraw dan IDCompositionSurface::EndDraw memungkinkan Anda menyinkronkan pembaruan penyajian dengan pembaruan visual. Misalnya, Anda dapat memanggil IDCompositionSurface::BeginDraw, memperbarui properti OffsetX dan Klip dari visual, memanggil IDCompositionDevice::Commit, menggambar konten dengan Microsoft DirectX, lalu memanggil IDCompositionSurface::EndDraw. Dalam hal ini, Microsoft DirectComposition memastikan bahwa konten bitmap dan properti visual diperbarui secara bersamaan.

Pembuatan batch

Anda dapat menerapkan beberapa perubahan pada visual yang sama, atau beberapa perubahan pada visual yang berbeda, dalam bingkai yang sama. Saat membuat beberapa perubahan pada visual yang sama dalam bingkai yang sama, ingatlah poin-poin berikut:

  • Jika Anda membuat beberapa perubahan pada properti visual yang sama, hanya perubahan terakhir yang diterapkan. Misalnya, jika Anda mengatur opasitas ke 0, maka ke 0,5, dan akhirnya ke 1,0, hanya opasitas 1,0 yang diterapkan ke visual.

  • Jika Anda mengubah beberapa properti dari visual yang sama, DirectComposition menerapkan perubahan terlebih dahulu ke visual lalu ke visual turunan apa pun. Properti diterapkan dalam urutan berikut terlepas dari urutan di mana Anda menentukannya:

    1. Offset
    2. Transformasi
    3. Klip
    4. Efek

    Ilustrasi berikut menunjukkan hasil penerapan keempat properti ke visual.

    hasil penerapan keempat properti ke visual

    Ingat bahwa semua perubahan diterapkan ke visual sekaligus dalam konteks bingkai yang sama. Ini berarti bahwa, dari perspektif pengguna, perubahan pada visual terjadi secara instan.

  • Untuk properti Transformasi, Anda dapat menggunakan IDCompositionDevice::CreateTransformGroup untuk membuat sekelompok transformasi untuk diterapkan ke visual sekaligus. DirectComposition menerapkan transformasi dalam urutan yang Anda tentukan.

  • Untuk properti Efek, Anda dapat menggunakan IDCompositionEffectGroup untuk menerapkan sekelompok efek. DirectComposition menerapkan efek dalam urutan yang Anda tentukan. Selain itu, transformasi perspektif 3D menghasilkan perataan pohon visual setelah semua transformasi 3D dalam visual saat ini telah diterapkan. Ini membantu memastikan bahwa visual yang dihasilkan terlihat sedekat mungkin dengan 3D.

Sinkronisasi

Aplikasi Anda dapat memanggil DirectComposition dari beberapa utas secara bersamaan. Urutan eksekusi dijamin untuk panggilan berurutan, tetapi tidak untuk panggilan bersamaan. Misalnya, jika utas A memodifikasi visual dan utas B menerapkan batch secara bersamaan, itu tidak ditentukan apakah perubahan visual disertakan dalam batch yang diterapkan atau apakah memulai batch baru. Di sisi lain, jika aplikasi Anda menggunakan mekanisme sinkronisasi lain untuk memastikan bahwa satu metode dipanggil sebelum yang lain, DirectComposition mematuhi pesanan panggilan dan memprosesnya seolah-olah kedua panggilan dikeluarkan dalam urutan tersebut dari satu utas.

Pohon visual lintas perangkat

Objek DirectComposition tidak terikat utas; Anda dapat menggunakan beberapa utas untuk memodifikasi sekumpulan objek yang sama. Namun, ketahui masalah berikut saat berbagi objek perangkat yang sama.

  • Kedua utas harus dapat memanggil IDCompositionDevice::Commit. Jika hanya salah satu utas yang memanggil IDCompositionDevice::Commit, utas lain tidak dapat melakukan salah satu perubahannya pada DirectComposition.
  • Perilaku transaksi mungkin hilang jika satu utas memanggil IDCompositionDevice::Commit saat utas lain masih membuat perubahan yang dimaksudkan untuk menjadi bagian dari transaksi yang sama.

Jika Anda perlu melakukan beberapa transaksi simultan ke DirectComposition, Anda harus menggunakan beberapa objek perangkat, mungkin dari beberapa utas. Dalam skenario ini, pohon visual yang sama dibagikan oleh kedua objek perangkat, dan setiap objek perangkat melakukan transaksinya sendiri.

Ilustrasi berikut menunjukkan pohon visual yang dibagikan oleh dua objek perangkat. Visual 1, 2, 4 dan 5 dimiliki oleh satu perangkat atau yang lain, tetapi visual 3 dibagikan oleh kedua perangkat, dan karenanya dapat digunakan untuk menghubungkan dua sub-pohon ke dalam satu pohon visual yang lebih besar. Berbagi pohon visual memungkinkan kedua perangkat dimanipulasi dari dua utas yang berbeda secara asinkron.

pohon visual yang dibagikan oleh dua perangkat

Untuk mengilustrasikan kegunaan berbagi pohon visual antara dua perangkat, pertimbangkan arsitektur yang memungkinkan input sentuhan latensi rendah. Arsitektur dapat menggunakan dua utas, satu yang menangani sebagian besar tugas UI, dan utas kedua yang didedikasikan untuk memproses peristiwa input sentuh. Utas sentuh memperbarui transformasi visual tertentu berdasarkan gerakan input pengguna. Dengan memperbarui transformasi, utas sentuh dapat membuat seluruh subtree di bawah visual tersebut mengikuti jari pengguna, meningkatkan atau menurunkan skala saat pengguna menjalankan gerakan multi-sentuh, dan sebagainya. Utas UI mempertahankan kepemilikan sebagian besar pohon komposisi, dengan utas sentuh hanya memiliki beberapa visual yang ditandai untuk respons sentuh asinkron. Ilustrasi berikut menunjukkan versi pohon komposisi yang disederhanakan:

pohon visual yang dibagikan antara utas ui dan utas sentuh

Biasanya, utas UI hanya memodifikasi visual yang dimilikinya secara eksklusif, dan utas sentuh hanya memodifikasi visual bersama. Satu-satunya pengecualian terjadi saat membuat atau menghancurkan subtree yang mendukung sentuhan.

IDCompositionSurface::BeginDraw

IDCompositionSurface::EndDraw

IDCompositonDevice::Commit

Konsep DirectComposition