Transformasi dan Elemen Halaman

Panduan ini menjelaskan konsep dasar yang digunakan dalam mengubah (yaitu, memindahkan, memutar, menskalakan, dan memiringkan) elemen halaman, yang berfokus terutama pada transformasi afin yang mendasarinya dan operasinya.

Untuk mengetahui informasi selengkapnya tentang cara menggunakan transformasi afin untuk mencapai hasil tertentu, lihat panduan Bentuk Ukuran dan Posisi.

Ukuran visual dan posisi elemen halaman dikontrol oleh dua properti: size dan transform. Ukuran menjelaskan ukuran ideal atau bawaan elemen halaman yang dibuat. Transformasi menentukan matriks transformasi afin dua dimensi yang menentukan cara objek pada ukuran bawaannya ditransformasikan sehingga menghasilkan tampilan visual akhirnya.

Diagram bentuk yang dirender melalui transformasi afin

Saat memilih elemen halaman di UI Slide dan mengubah ukuran visualnya menggunakan handle penyesuaian, Anda sebenarnya memperbarui matriks transformasi ini. Memindahkan elemen di seluruh halaman atau memutarnya juga akan memperbarui matriks transformasi elemen.

Menggunakan UI Slide untuk memulai

Aritmetika matriks yang Anda gunakan untuk mengubah dan mengubah ukuran elemen halaman sangat canggih, tetapi pada awalnya dapat membingungkan; sebagian besar halaman ini menjelaskan penghitungan ini. Namun, Anda dapat menyederhanakan spesifikasi transformasi dan ukuran menggunakan pendekatan berikut:

  1. Buat elemen halaman menggunakan UI Slide.
  2. Skalakan posisi elemen halaman ini sesuai keinginan, tetap menggunakan UI Slide.
  3. Baca ukuran dan transformasi elemen tersebut menggunakan metode get.

Hal ini sudah cukup untuk memulai; bagian selanjutnya dari panduan ini menjelaskan penghitungan transformasi yang dapat Anda gunakan untuk memanipulasi elemen halaman secara mendetail.

Matriks transformasi afin

Matriks transformasi afin dua dimensi biasanya digunakan oleh library grafik untuk mengontrol skala, rotasi, geser, refleksi, dan terjemahan elemen. Di Slides API, transformasi elemen halaman direpresentasikan sebagai matriks 3x3:

Parameter yang digunakan dalam transformasi adalah:

translate_x Parameter terjemahan menentukan posisi (X,Y) sudut kiri atas elemen halaman, relatif terhadap sudut kiri atas halaman. Anda menentukan posisi relatif menggunakan Unit dari titik (pt) atau unit metrik Inggris (EMU).
translate_y
scale_x Parameter skala mengontrol seberapa besar elemen halaman saat dirender. Ini adalah faktor pengganda tanpa satuan; misalnya, nilai scale_x 1,5 akan memperbesar lebar elemen sebesar 50%.
scale_y
shear_x Parameter geser juga tidak memiliki satuan dan mengontrol kemiringan elemen halaman. Parameter penskalaan dan pergeseran dapat digunakan bersama untuk memutar elemen halaman.
shear_y

Anda dapat menemukan banyak contoh di web yang menunjukkan cara matriks transformasi 2D memengaruhi rendering objek grafis.

Matriks transformasi bersifat relatif terhadap grup atau halaman yang berisi elemen. Misalnya, jika Anda memutar grup yang berisi persegi panjang, nilai kolom transform grup akan mencerminkan rotasi, tetapi nilai kolom transform persegi panjang tidak.

Menghitung ukuran visual

Untuk menentukan ukuran visual (dirender) elemen halaman, Anda harus mempertimbangkan properti ukuran dan transformasi secara bersamaan. Anda tidak dapat menentukan mana dari dua elemen halaman yang secara visual lebih besar hanya dengan membandingkan properti ukurannya: Anda harus memetakan batas elemen menggunakan matriks transformasi dan menghitung ukuran yang dirender.

Memetakan titik

Untuk memetakan titik tertentu menggunakan matriks transformasi, konversikan titik (x, y) menjadi vektor [x, y, 1], lalu lakukan perkalian matriks. Pertimbangkan pemetaan titik p:

Hal ini menjadi:

Oleh karena itu, koordinat titik baru p' adalah:

Menghitung batas

Untuk menentukan ukuran yang dirender dari kotak pembatas elemen setelah transformasi yang memiringkan dan menskalakan, gunakan:

Untuk mengetahui informasi selengkapnya tentang cara menggunakan transformasi afin untuk mencapai hasil tertentu, lihat panduan Bentuk Ukuran dan Posisi.

Batasan

Beberapa kolom ukuran dan pemosisian tidak kompatibel dengan beberapa jenis elemen halaman. Tabel di bawah ini merangkum kompatibilitas elemen halaman tertentu dengan kolom ukuran dan pemosisian.

Kolom Bentuk Video Tabel
Translation
Menskalakan Tidak**
Shear Tidak Tidak

** Untuk memperbarui dimensi baris dan kolom tabel, gunakan UpdateTableRowPropertiesRequest dan UpdateTableColumnPropertiesRequest.

Semua kolom ukuran dan pemosisian dapat memberikan hasil yang tidak terduga jika elemen halaman memiliki pergeseran. Semua batasan dapat berubah sewaktu-waktu. Untuk informasi terbaru, lihat Google Slides API.