Transformasi dan Elemen Halaman

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

Untuk informasi selengkapnya tentang cara menggunakan transformasi affine guna mencapai hasil tertentu, lihat panduan Mengatur Ukuran dan Posisi Bentuk.

Ukuran dan posisi visual elemen halaman dikontrol oleh dua properti: size dan transform. Ukuran menjelaskan ukuran ideal atau bawaan dari elemen halaman yang dibuat. Transformasi ini menentukan matriks transformasi affine dua dimensi yang menentukan bagaimana objek pada ukuran bawaannya diubah untuk menghasilkan tampilan visual akhirnya.

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

Menggunakan UI Slide untuk memulai

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

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

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

Matriks transformasi affine

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

$$A=\begin{bmatrix} scale\_x & shear\_x & translate\_x\\ shear\_y & scale\_y & translate\_y\\ 0 & 0 & 1 \end{bmatrix}$$

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 titik (pt) atau satuan metrik bahasa Inggris (EMU).
translate_y
scale_x	Parameter skala mengontrol seberapa besar elemen halaman saat dirender. Ini adalah faktor perkalian tanpa unit; misalnya, nilai scale_x sebesar 1,5 akan memperbesar lebar elemen sebesar 50%.
scale_y
shear_x	Parameter geser juga tanpa unit dan mengontrol kemiringan elemen halaman. Parameter skala dan geser dapat digunakan bersama untuk memutar elemen halaman.
shear_y

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

Matriks transformasi bersifat relatif terhadap grup atau halaman elemen yang memuatnya. 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 lebih besar secara visual 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:

\[p' = Ap\]

Ini menjadi:

$$\begin{bmatrix} x'\\ y'\\ 1 \end{bmatrix} =\begin{bmatrix} scale\_x & shear\_x & translate\_x\\ shear\_y & scale\_y & translate\_y\\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y\\ 1 \end{bmatrix}$$

Oleh karena itu, koordinat titik baru p' adalah:

$$x' = (scale\_x \times x) + (shear\_x \times y) + translate\_x\\ y' = (scale\_y \times y) + (shear\_y \times x) + translate\_y$$

Menghitung batas

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

$$width' = (scale\_x \times width) + (shear\_x \times height)\\ height' = (scale\_y \times height) + (shear\_y \times width)$$

Untuk informasi selengkapnya tentang cara menggunakan transformasi affine guna mencapai hasil tertentu, lihat panduan Mengatur Ukuran dan Posisi Bentuk.

Batasan

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

Kolom	Bentuk	Video	Tabel
Terjemahan	✔	✔	✔
Skala	✔	✔	Tidak**
Geser	✔	Tidak	Tidak

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

Semua kolom ukuran dan posisi mungkin memberikan hasil yang tidak diharapkan jika elemen halaman memiliki geseran. Semua batasan dapat berubah sewaktu-waktu. Untuk mengetahui informasi terbaru, lihat Google Slides API.