Operasi transformasi

Google Slides API memungkinkan Anda memanipulasi lokasi, ukuran, dan orientasi PageElement (kotak teks, gambar, tabel, dan bentuk dasar) di halaman, sekaligus menjaga garis tetap lurus serta mempertahankan titik dan garis paralel. Ini dikenal sebagai transformasi affine. Contoh di sini menunjukkan beberapa operasi transformasi elemen halaman umum menggunakan metode presentations.batchUpdate.

Contoh ini menggunakan variabel berikut:

  • PRESENTATION_ID—Menunjukkan tempat Anda memberikan ID presentasi. Anda dapat menemukan nilai untuk ID ini dari URL presentasi.
  • PAGE_ID—Menunjukkan tempat Anda memberikan ID objek halaman. Anda dapat mengambil nilai ini dari URL atau dengan menggunakan permintaan baca API.
  • PAGE_ELEMENT_ID—Menunjukkan tempat Anda memberikan ID objek elemen halaman. Anda dapat menentukan ID ini untuk elemen yang Anda buat (dengan beberapa batasan) atau mengizinkan Slides API untuk membuatnya secara otomatis. ID elemen dapat diambil melalui permintaan baca API.

Contoh ini disajikan sebagai permintaan HTTP agar tidak menggunakan bahasa yang netral. Untuk mempelajari cara menerapkan update batch dalam berbagai bahasa menggunakan library klien Google API, lihat Menambahkan bentuk dan teks.

Contoh bentuk panah

Untuk contoh di bawah ini, asumsikan ada contoh elemen halaman bentuk panah dengan data ukuran dan transformasi berikut (yang dapat ditemukan dengan permintaan metode presentations.pages.get). Contoh bentuk menggunakan pengukuran unit EMU (Bahasa Inggris Unit Metrik) dan pt (titik).

{
  "objectId": PAGE_ELEMENT_ID,
  "size": {
    "width": {
      "magnitude": 3000000,
      "unit": "EMU"
    },
    "height": {
      "magnitude": 3000000,
      "unit": "EMU"
    }
  },
  "transform": {
    "scaleX": 0.3,
    "scaleY": 0.12,
    "shearX": 0,
    "shearY": 0,
    "translateX": 2000000,
    "translateY":  550000,
    "unit": "EMU"
  },
  "shape": {
    "shapeType": "RIGHT_ARROW"
  }
}

Menyejajarkan elemen dengan elemen lain

Contoh kode presentations.batchUpdate berikut menunjukkan cara menggunakan metode CreateShapeRequest untuk membuat bentuk baru di posisi yang benar dan sejajar dengan contoh bentuk panah di halaman. Dalam kedua kasus tersebut, koordinat X dan Y dari sudut kiri atas bentuk baru harus dihitung.

Permintaan pertama membuat persegi panjang berukuran 100 x 50 pt yang sejajar dengan batas kiri bentuk panah, tetapi diposisikan 50 pt (50 * 12.700 = 635.000 EMU) di bawah tepi atas panah. Koordinat X persegi panjang baru harus sama dengan koordinat X panah untuk menjaga batas kirinya tetap rata. Koordinat Y sama dengan koordinat Y panah ditambah 50 pt, karena jarak diukur dari bagian atas panah. Oleh karena itu, koordinat persegi panjang:

x" = 2000000 EMU
y" = 550000 + (50 * 12700) = 1185000 EMU

Permintaan kedua membuat lingkaran selebar 40 pt yang memiliki garis tengah horizontal yang sama dengan contoh panah, tetapi diposisikan 100 pt (1.270.000 EMU) di sebelah kanan tepi kanan panah. Koordinat X lingkaran adalah jumlah dari koordinat X panah, lebar panah, dan 100 pt. Menerapkan perataan garis tengah untuk lingkaran baru perlu memperhitungkan tinggi panah dan lingkaran. Koordinat Y lingkaran adalah koordinat Y panah ditambah setengah tinggi panah dikurangi setengah tinggi lingkaran. Dalam kedua kasus tersebut, faktor penskalaan yang terkait dengan panah juga harus diperhitungkan, karena memengaruhi lebar dan tinggi panah yang dirender. Oleh karena itu, koordinat lingkaran adalah:

x = 2000000 + (0.3 * 3000000) + (100 * 12700) = 4170000 EMU
y = 550000 + (0.5 * 0.12 * 3000000) - (0.5 * 40 * 12700) = 476000 EMU

Berikut adalah protokol permintaan untuk menyelaraskan elemen dengan elemen lain:

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
  "requests": [
    {
      "createShape": {
        "shapeType": "RECTANGLE",
        "elementProperties": {
          "pageObjectId": PAGE_ID,
          "size": {
            "width": {
              "magnitude": 100,
              "unit": "PT"
            },
            "height": {
              "magnitude": 50,
              "unit": "PT"
            }
          },
          "transform": {
            "scaleX": 1,
            "scaleY": 1,
            "translateX": 2000000,
            "translateY": 1185000,
            "unit": "EMU"
          }
        }
      }
    },
    {
      "createShape": {
        "shapeType": "ELLIPSE",
        "elementProperties": {
          "pageObjectId": PAGE_ID,
          "size": {
            "width": {
              "magnitude": 40,
              "unit": "PT"
            },
            "height": {
              "magnitude": 40,
              "unit": "PT"
            }
          },
          "transform": {
            "scaleX": 1,
            "scaleY": 1,
            "translateX": 4170000,
            "translateY":  476000,
            "unit": "EMU"
          }
        }
      }
    }
  ]
}

Memindahkan elemen

Contoh kode presentations.batchUpdate berikut menunjukkan cara menggunakan metode UpdatePageElementTransformRequest untuk menerjemahkan elemen halaman contoh bentuk panah dengan dua cara berbeda.

Permintaan pertama dalam batch memindahkan panah ke (X,Y) = (2000000, 150000) koordinat EMU yang dibuat (menggunakan terjemahan absolut applyMode). Permintaan kedua dalam batch memindahkan panah dari sana, kali ini 40.000 EMU ke kanan dan 35.000 transformasi relatif matrik ke atas (menggunakan elemen transformasi matrik1).applyMode

Setelah menjalankan kedua permintaan, sudut kiri atas panah berada di koordinat EMU (X,Y) = (2040000, 115000).

Berikut adalah protokol permintaan untuk memindahkan elemen:

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
  "requests": [
    {
      "updatePageElementTransform": {
        "objectId": PAGE_ELEMENT_ID,
        "applyMode": "ABSOLUTE",
        "transform": {
            "scaleX": 0.3,
            "scaleY": 0.12,
            "translateX": 2000000,
            "translateY":  150000,
            "unit": "EMU"
        }
      }
    },
    {
      "updatePageElementTransform": {
        "objectId": PAGE_ELEMENT_ID,
        "applyMode": "RELATIVE",
        "transform": {
            "scaleX": 1,
            "scaleY": 1,
            "translateX":  40000,
            "translateY": -35000,
            "unit": "EMU"
        }
      }
    }
  ]
}

Mencerminkan elemen

Contoh kode presentations.batchUpdate berikut menunjukkan cara menggunakan metode UpdatePageElementTransformRequest untuk merefleksikan elemen halaman contoh bentuk panah secara horizontal di sepanjang pusatnya, tanpa mengubah posisinya pada halaman atau menskalakan.

Hal ini dilakukan dengan menggunakan transformasi refleksi dasar dalam frame referensi elemen. Agar lebih jelas, pergeseran dan refleksi frame referensi ditampilkan dengan tiga panggilan terpisah ke metode UpdatePageElementTransformRequest, tetapi akan lebih efisien untuk menghitung hasil matriks transformasi ini terlebih dahulu, lalu menerapkan produk tersebut sebagai permintaan tunggal.

Untuk transformasi terjemahan, bagian tengah bentuk panah dipindahkan ke dan dari asal. Nilai parameter dinyatakan sebagai kalkulasi agar lebih jelas.

Berikut adalah protokol permintaan untuk mencerminkan elemen:

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
  "requests": [
    {
      "updatePageElementTransform": {
        "objectId": PAGE_ELEMENT_ID,
        "applyMode": "RELATIVE",
        "transform": {
            "scaleX":  1,
            "scaleY":  1,
            "translateX": -2000000 - 0.5 * 0.3  * 3000000,
            "translateY":  -550000 - 0.5 * 0.12 * 3000000,
            "unit": "EMU"
        }
      }
    },
    {
      "updatePageElementTransform": {
        "objectId": PAGE_ELEMENT_ID,
        "applyMode": "RELATIVE",
        "transform": {
            "scaleX": -1,
            "scaleY":  1,
            "unit": "EMU"
        }
      }
    },
    {
      "updatePageElementTransform": {
        "objectId": PAGE_ELEMENT_ID,
        "applyMode": "RELATIVE",
        "transform": {
            "scaleX":  1,
            "scaleY":  1,
            "translateX":  2000000 + 0.5 * 0.3  * 3000000,
            "translateY":   550000 + 0.5 * 0.12 * 3000000,
            "unit": "EMU"
        }
      }
    }
  ]
}

Mengubah ukuran elemen

Contoh kode presentations.batchUpdate berikut menunjukkan cara menggunakan metode UpdatePageElementTransformRequest untuk menskalakan elemen halaman contoh bentuk panah menjadi 50% lebih lebar dan hanya 80% dari tingginya saat ini, sekaligus mempertahankan bagian tengah panah di posisi yang sama dan mempertahankan orientasinya.

Hal ini dilakukan dengan menggunakan transformasi penskalaan dasar dalam frame referensi elemen. Agar lebih jelas, penskalaan dan pergeseran frame referensi ditampilkan dengan tiga panggilan terpisah ke metode UpdatePageElementTransformRequest, tetapi akan lebih efisien untuk menghitung hasil matriks transformasi ini terlebih dahulu, lalu menerapkan produk tersebut sebagai permintaan tunggal.

Untuk transformasi terjemahan, bagian tengah bentuk panah dipindahkan ke dan dari asal. Nilai parameter dinyatakan sebagai kalkulasi agar lebih jelas.

Berikut adalah protokol permintaan untuk mengubah ukuran elemen:

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
  "requests": [
    {
      "updatePageElementTransform": {
          "objectId": PAGE_ELEMENT_ID,
          "applyMode": "RELATIVE",
          "transform": {
              "scaleX":  1,
              "scaleY":  1,
              "translateX": -2000000 - 0.5 * 0.3  * 3000000,
              "translateY":  -550000 - 0.5 * 0.12 * 3000000,
              "unit": "EMU"
          }
      }
    },
    {
      "updatePageElementTransform": {
        "objectId": PAGE_ELEMENT_ID,
        "applyMode": "RELATIVE",
        "transform": {
            "scaleX": 1.5,
            "scaleY": 0.8,
            "unit": "EMU"
        }
      }
    },
    {
      "updatePageElementTransform": {
        "objectId": PAGE_ELEMENT_ID,
        "applyMode": "RELATIVE",
        "transform": {
            "scaleX":  1,
            "scaleY":  1,
            "translateX":  2000000 + 0.5 * 0.3  * 3000000,
            "translateY":   550000 + 0.5 * 0.12 * 3000000,
            "unit": "EMU"
        }
      }
    }
  ]
}

Memutar elemen di sekitar bagian tengahnya

Contoh kode presentations.batchUpdate berikut menunjukkan cara menggunakan metode UpdatePageElementTransformRequest untuk memutar elemen halaman contoh bentuk panah 35 derajat berlawanan arah jarum jam, sambil mempertahankan bagian tengah panah di posisi yang sama dan mempertahankan ukurannya.

Hal ini dilakukan dengan menggunakan transformasi rotasi dasar dalam frame referensi elemen. Agar lebih jelas, pergeseran dan rotasi frame referensi ditampilkan dengan tiga panggilan terpisah ke metode UpdatePageElementTransformRequest. Namun, akan lebih efisien untuk menghitung hasil matriks transformasi ini terlebih dahulu, lalu menerapkan hasilnya sebagai permintaan tunggal

Untuk transformasi terjemahan, bagian tengah bentuk panah dipindahkan ke dan dari asal. Nilai parameter dinyatakan sebagai kalkulasi agar lebih jelas.

Berikut adalah protokol permintaan untuk merotasi elemen di seputar pusatnya:

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
{
  "requests": [
    {
      "updatePageElementTransform": {
          "objectId": PAGE_ELEMENT_ID,
          "applyMode": "RELATIVE",
          "transform": {
              "scaleX":  1,
              "scaleY":  1,
              "translateX": -2000000 - 0.5 * 0.3  * 3000000,
              "translateY":  -550000 - 0.5 * 0.12 * 3000000,
              "unit": "EMU"
          }
      }
    },
    {
      "updatePageElementTransform": {
        "objectId": PAGE_ELEMENT_ID,
        "applyMode": "RELATIVE",
        "transform": {
            "scaleX":  cos(35 * (pi/180)),
            "scaleY":  cos(35 * (pi/180)),
            "shearX":  sin(35 * (pi/180)),
            "shearY": -sin(35 * (pi/180)),
            "unit": "EMU"
        }
      }
    },
    {
      "updatePageElementTransform": {
        "objectId": PAGE_ELEMENT_ID,
        "applyMode": "RELATIVE",
        "transform": {
            "scaleX":  1,
            "scaleY":  1,
            "translateX":  2000000 + 0.5 * 0.3  * 3000000,
            "translateY":   550000 + 0.5 * 0.12 * 3000000,
            "unit": "EMU"
        }
      }
    }
  ]
}