Bagikan melalui


Gambaran Umum Transformasi

Topik ini membahas dasar-dasar transformasi Direct2D dan mencakup contoh berbagai transformasi. Ini berisi bagian-bagian berikut:

Apa itu Transformasi Direct2D?

Transformasi menentukan cara memetakan titik objek dari satu ruang koordinat ke posisi lain atau dari satu posisi ke posisi lain dalam ruang koordinat yang sama. Pemetaan ini dijelaskan oleh matriks transformasi, didefinisikan sebagai kumpulan tiga baris dengan tiga kolom nilai FLOAT seperti yang ditunjukkan dalam tabel berikut.

     
M11Default: 1.0 M12Default: 0.0 0.0
M21Default: 0.0 M22Default: 1.0 0.0
M31OffsetX: 0.0 M32OffsetY: 0.0 1.0

 

Dalam matriks ini, anggota M11, M12, M21, dan M22 menentukan transformasi linier yang dapat menskalakan, memutar, atau condong objek; anggota OffsetX dan OffsetY menentukan terjemahan yang akan diterapkan setelah transformasi linier dibuat. Untuk transformasi affine, nilai di kolom ketiga selalu 0,0, 0,0, dan 1,0.

Karena Direct2D hanya mendukung transformasi affine (linear), matriks transformasinya didefinisikan sebagai matriks 3-by-2, menghilangkan kolom ketiga dari matriks transformasi sebelumnya. Tabel berikut ini memperlihatkan tata letak matriks transformasi Direct2D.

   
M11Default: 1.0 M12Default: 0.0
M21Default: 0.0 M22Default: 1.0
M31OffsetX: 0.0 M32OffsetY: 0.0

 

Dalam Direct2D, matriks 3-by-2 ini diwakili oleh struktur D2D1_MATRIX_3X2. Untuk menyederhanakan operasi matriks umum, Direct2D juga menyediakan kelas bernama Matrix3x2F, yang berasal dari struktur D2D1_MATRIX_3X2.

Konstruktor default untuk Matrix3x2F membuat objek tidak diinisialisasi. Untuk mengambil matriks identitas, gunakan Matrix3x2F::Identity.

Ketika transformasi identitas diterapkan ke objek, transformasi identitas tidak mengubah posisi, bentuk, atau ukuran objek. Ini mirip dengan cara mengalikan sebuah angka dengan 1 yang tidak mengubah angkanya. Dengan kata lain, transformasi identitas meninggalkan koordinat titik saja dan tidak menggeser titik ke posisi baru. Setiap transformasi selain transformasi identitas akan memodifikasi posisi, bentuk, dan/atau ukuran objek.

Transformasi adalah tentang koordinat, dan memahami ruang koordinat Direct2D penting untuk memahami penggunaan transformasi.

Ruang Koordinat Direct2D

Direct2D menggunakan ruang koordinat tangan kiri; artinya, nilai sumbu x positif meningkat ke kanan dan nilai sumbu y positif meningkat ke bawah. Semua yang ada di layar diposisikan relatif terhadap asal, yang merupakan titik di mana sumbu x dan sumbu y bersinggungan (0, 0), seperti yang ditunjukkan pada ilustrasi berikut. Target render Direct2D menggunakan ruang koordinat ini.

ilustrasi sumbu x dan sumbu y dari ruang koordinat tangan kiri

Dengan memanipulasi nilai dalam matriks transformasi, Anda dapat memutar, menskalakan, condong, dan memindahkan (menerjemahkan) objek. Misalnya, jika Anda mengatur OffsetX ke 100 dan OffsetY ke 200, Anda memindahkan objek ke kanan 100 piksel dan menurunkan 200 piksel.

Untuk menunjukkan efek pemindahan objek, Anda perlu menerapkan transformasi terjemahan untuk merender target, kuas, atau geometri. Menerapkan transformasi untuk merender target memengaruhi seluruh layar, sedangkan menerapkan transformasi ke brush atau geometri hanya memengaruhi brush atau geometri tersebut. Untuk membuat matriks transformasi, gunakan kelasMatrix3x2F.

Membuat Matriks Transformasi

Untuk membuat transformasi rotasi, skala, condong, dan terjemahan, kelas Matrix3x2F menyediakan metode statis yang ditunjukkan dalam tabel berikut. Kolom Contoh tabel berisi tautan ke topik cara yang menunjukkan cara menggunakan setiap metode transformasi.

Metode Deskripsi Contoh Ilustrasi
matriks3x2f::putar membuat transformasi rotasi yang memiliki sudut dan titik tengah yang ditentukan. cara memutar objek ilustrasi persegi yang diputar 45 derajat searah jarum jam dengan pusat persegi asli
matriks3x2f::scale membuat transformasi skala yang memiliki faktor skala dan titik tengah yang ditentukan. cara menskalakan objek ilustrasi persegi yang berskala 130%
matriks3x2f::skew membuat transformasi condong yang memiliki nilai sumbu x dan nilai sumbu y yang ditentukan serta titik pusat yang ditentukan. cara membuat condong objek ilustrasi persegi miring 30 derajat berlawanan arah jarum dari sumbu y
matriks3x2f::terjemahan membuat transformasi translasi dan menentukan perpindahan ke arah sumbu x dan sumbu y. cara menerjemahkan objek ilustrasi persegi yang dipindahkan 20 unit di sepanjang sumbu x positif dan 10 unit di sepanjang sumbu y positif

 

Merender Transformasi Target

Render target adalah sumber daya yang mewarisi dari antarmuka ID2D1RenderTarget. Ini menciptakan sumber daya untuk menggambar dan melaksanakan operasi menggambar sesungguhnya. Ini juga menyediakan metode untuk mengubah ruang koordinat. Anda dapat memanggil metode ID2D1RenderTarget::SetTransform untuk menerapkan transformasi yang ditentukan ke target render. Semua operasi gambar berikutnya terjadi dalam ruang yang sudah ditransformasikan.

Untuk merender konten, gunakan metode menggambar dari sasaran rendering. Sebelum Anda mulai menggambar, panggil metodeBeginDraw. Untuk menyelesaikan penyajian konten, panggil metodeEndDraw. Misalnya, lihat Cara Menerapkan Beberapa Transformasi ke Objek.

Transformasi Sikat

Anda dapat menyesuaikan transformasi pada kuas dengan memanggil SetTransform. Untuk transformasi ini, Anda dapat menganggap kuas sebagai selembar kertas besar dan primitif penyajian yang berbeda (teks, geometri, persegi panjang dan sebagainya) sebagai stensil. Ketika Anda menyesuaikan transformasi kuas, seolah-olah Anda menggeser selembar kertas besar di bawah stensil, tanpa mengubah posisi stensil itu sendiri. Anda dapat menggunakan teknik ini untuk membuat teks memudar dari kuning ke hitam menjadi ruang 3D.

Ketika transformasi kuas adalah transformasi identitas, kuas muncul di ruang koordinat yang sama dengan target render tempat mereka digambar. Transformasi kuas memungkinkan pemanggil untuk mengubah bagaimana koordinat kuas memetakan ke ruang ini.

Ruang kuas ditentukan secara berbeda dalam Direct2D dibandingkan dengan Windows Presentation Foundation (WPF). Di Direct2D, ruang kuas tidak relatif terhadap objek yang digambar, melainkan merupakan sistem koordinat target render saat ini yang ditransformasikan oleh transformasi kuas, ketika ada. Agar kuas mengisi objek seperti yang dilakukan di WPF, Anda harus menerjemahkan asal ruang kuas ke sudut kiri atas kotak pembatas objek, lalu mengubah skala ruang kuas sehingga ubin dasar mengisi kotak pembatas objek.

Untuk informasi selengkapnya tentang transformasi kuas, silakan lihat Gambaran Umum Kuas Direct2D.

Transformasi Geometri

Saat Anda menskalakan, memindahkan, menggeser, atau memiringkan geometri, Anda dapat langsung menerapkan transformasi ke geometri tertentu, bukan ke transformasi pada sasaran render yang akan memengaruhi seluruh layar. Transformasi target render umumnya memengaruhi goresan dan mengisi geometri. Sebaliknya, transformasi geometri hanya memengaruhi isi dari geometri, karena transformasi diterapkan ke geometri sebelum digaris.

Nota

Dimulai dengan Windows 8, transformasi dunia tidak memengaruhi stroke jika Anda mengatur jenis stroke ke D2D1_STROKE_TRANSFORM_TYPE_FIXED atau D2D1_STROKE_TRANSFORM_TYPE_HAIRLINE.

 

Anda dapat menyesuaikan transformasi pada geometri dengan memanggil ID2D1Factory::CreateTransformedGeometry untuk membuat objekID2D1TransformedGeometry. Untuk informasi selengkapnya tentang transformasi geometri, lihat Gambaran Umum Geometri Direct2D .

Bagaimana Transformasi Render Target Memengaruhi Klip

Transformasi pada target render memengaruhi bagaimana kotak pembatas dari klip yang sejajar dengan sumbu dihitung. Ketika PushAxisAlignedClip dipanggil, parameter clipRect diubah oleh transformasi dunia yang diterapkan pada target render saat ini. Setelah transformasi diterapkan ke clipRect, kotak batas rata sumbu untuk clipRect dihitung. Untuk efisiensi, konten dipotong ke kotak pembatas yang selaras dengan sumbu ini dan bukan ke clipRect asli yang diteruskan. Diagram berikut menunjukkan bagaimana transformasi rotasi diterapkan ke target render, clipRect yang dihasilkan, dan kotak pembatas rata sumbu yang dihitung.

  1. Asumsikan bahwa persegi panjang dalam ilustrasi berikut adalah target render yang selaras dengan piksel layar.

    ilustrasi persegi panjang (sasaran render)

  2. Terapkan transformasi rotasi ke target render. Dalam ilustrasi berikut, persegi panjang hitam mewakili target render asli dan persegi panjang putus-putus merah mewakili target render yang diubah.

    ilustrasi persegi panjang asli dan persegi panjang yang diputar (target render yang diubah)

  3. Setelah PushAxisAlignedClip dipanggil, transformasi rotasi diterapkan ke clipRect. Dalam ilustrasi berikut, persegi panjang biru mewakili clipRect yang diubah .

    ilustrasi persegi panjang biru yang lebih kecil (kliprect) di dalam persegi panjang yang diputar (target render yang diubah)

  4. Kotak pembatas rata sumbu dihitung. Dalam ilustrasi berikut, persegi panjang putus-putus hijau mewakili kotak pembatas. Semua isi diklip ke kotak pembatas rata sumbu ini.

    ilustrasi kotak pembatas hijau pada persegi panjang biru kecil (kliprect)

Ringkasan

Direct2D memudahkan untuk mengubah objek dua dimensi dengan ruang koordinat yang disederhanakan dan kelas terkait. Dengan menggunakan berbagai jenis transformasi, Anda dapat menerjemahkan, memutar, condong, dan menskalakan objek Anda untuk mencapai banyak efek visual yang mengesankan.

Referensi Direct2D