Biến đổi thao tác

API Google Trang trình bày cho phép bạn thao tác với vị trí, kích thước và hướng của PageElement (hộp văn bản, hình ảnh, bảng và hình dạng cơ bản) trên một trang, đồng thời giữ cho các đường thẳng và giữ nguyên các điểm và đường song song. Các phép biến đổi này được gọi là biến đổi affine. Các ví dụ ở đây cho thấy một số thao tác biến đổi phần tử trang phổ biến bằng cách sử dụng phương thức presentations.batchUpdate.

Các ví dụ này sử dụng các biến sau:

  • PRESENTATION_ID – Cho biết vị trí bạn cung cấp mã nhận dạng bản trình bày. Bạn có thể khám phá giá trị của mã nhận dạng này từ URL của bản trình bày.
  • PAGE_ID – Cho biết vị trí bạn cung cấp mã nhận dạng đối tượng trang. Bạn có thể truy xuất giá trị cho thông tin này từ URL hoặc bằng cách sử dụng yêu cầu đọc API.
  • PAGE_ELEMENT_ID – Cho biết vị trí bạn cung cấp mã đối tượng phần tử trang. Bạn có thể chỉ định mã nhận dạng này cho các phần tử mà bạn tạo (với một số hạn chế) hoặc cho phép API Trang trình bày tự động tạo mã nhận dạng. Bạn có thể truy xuất mã nhận dạng phần tử thông qua yêu cầu đọc API.

Các ví dụ này được trình bày dưới dạng yêu cầu HTTP để không phân biệt ngôn ngữ. Để tìm hiểu cách triển khai bản cập nhật hàng loạt bằng nhiều ngôn ngữ bằng cách sử dụng thư viện ứng dụng API của Google, hãy xem phần Thêm hình dạng và văn bản.

Ví dụ về hình dạng mũi tên

Đối với các ví dụ dưới đây, giả sử rằng tồn tại một phần tử trang hình mũi tên mẫu với kích thước và dữ liệu biến đổi như sau (bạn có thể tìm thấy phần tử này bằng yêu cầu phương thức presentations.pages.get). Hình dạng trong ví dụ này sử dụng phép đo unit EMU (Đơn vị chỉ số tiếng Anh) và pt (điểm).

{
  "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"
  }
}

Căn chỉnh một phần tử với phần tử khác

Mã mẫu presentations.batchUpdate sau đây cho biết cách sử dụng phương thức CreateShapeRequest để tạo các hình dạng mới ở đúng vị trí, căn chỉnh với hình dạng mũi tên ví dụ trên trang. Trong cả hai trường hợp, bạn phải tính toán toạ độ X và Y của góc trên bên trái của hình dạng mới.

Yêu cầu đầu tiên tạo một hình chữ nhật 100x50 pt được căn chỉnh với đường viền bên trái của hình mũi tên, nhưng được đặt ở vị trí 50 pt (50 * 12.700 = 635.000 EMU) bên dưới cạnh trên của mũi tên. Toạ độ X của hình chữ nhật mới phải giống với toạ độ X của mũi tên để giữ cho đường viền trái được căn chỉnh. Toạ độ Y giống với toạ độ Y của mũi tên cộng với 50 pt, vì khoảng cách được đo từ đầu mũi tên. Do đó, toạ độ của hình chữ nhật là:

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

Yêu cầu thứ hai tạo một vòng tròn rộng 40 pt có cùng đường tâm ngang với mũi tên mẫu, nhưng được đặt cách 100 pt (1.270.000 EMU) bên phải cạnh phải của mũi tên. Toạ độ X của vòng tròn là tổng của toạ độ X của mũi tên, chiều rộng mũi tên và 100 pt. Việc căn chỉnh theo đường tâm cho vòng tròn mới yêu cầu phải tính đến chiều cao của cả mũi tên và vòng tròn. Toạ độ Y của vòng tròn là toạ độ Y của mũi tên cộng với một nửa chiều cao của mũi tên trừ đi một nửa chiều cao của vòng tròn. Trong cả hai trường hợp, bạn cũng phải tính đến các hệ số điều chỉnh theo tỷ lệ liên kết với mũi tên, vì các hệ số này ảnh hưởng đến chiều rộng và chiều cao được kết xuất của mũi tên. Do đó, toạ độ của vòng tròn là:

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

Sau đây là giao thức yêu cầu căn chỉnh một phần tử với một phần tử khác:

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"
          }
        }
      }
    }
  ]
}

Di chuyển một phần tử

Mã mẫu presentations.batchUpdate sau đây cho biết cách sử dụng phương thức UpdatePageElementTransformRequest để dịch phần tử trang hình dạng mũi tên ví dụ theo hai cách khác nhau.

Yêu cầu đầu tiên trong lô sẽ di chuyển mũi tên đến toạ độ EMU (X,Y) = (2000000, 150000) (sử dụng biến đổi tuyệt đối applyMode). Yêu cầu thứ hai trong lô sẽ di chuyển mũi tên từ đó, lần này là 40.000 EMU sang phải và 35.000 EMU lên trên (sử dụng biến đổi tương đối applyMode). Matrice transformation1 được sử dụng được tạo để tránh thay đổi kích thước và hướng của phần tử.

Sau khi thực thi cả hai yêu cầu, góc trên bên trái của mũi tên sẽ nằm ở toạ độ EMU (X,Y) = (2040000, 115000).

Sau đây là giao thức yêu cầu di chuyển một phần tử:

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"
        }
      }
    }
  ]
}

Phản ánh một phần tử

Mã mẫu presentations.batchUpdate sau đây cho biết cách sử dụng phương thức UpdatePageElementTransformRequest để phản ánh phần tử trang hình mũi tên ví dụ theo chiều ngang dọc theo tâm của phần tử đó, mà không làm thay đổi vị trí của phần tử đó trên trang hoặc điều chỉnh tỷ lệ.

Bạn có thể thực hiện việc này bằng cách sử dụng biến đổi phản chiếu cơ bản trong khung tham chiếu của phần tử. Để rõ ràng, chuyển đổi khung tham chiếu và phản chiếu được hiển thị bằng 3 lệnh gọi riêng biệt đến phương thức UpdatePageElementTransformRequest, nhưng hiệu quả hơn là tính toán trước tích của các ma trận biến đổi này rồi áp dụng tích đó dưới dạng một yêu cầu duy nhất.

Đối với phép biến đổi biến đổi, tâm của hình mũi tên sẽ được di chuyển đến và từ gốc. Để rõ ràng, các giá trị tham số được thể hiện dưới dạng phép tính.

Sau đây là giao thức yêu cầu để phản ánh một phần tử:

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"
        }
      }
    }
  ]
}

Đổi kích thước phần tử

Mã mẫu presentations.batchUpdate sau đây cho biết cách sử dụng phương thức UpdatePageElementTransformRequest để điều chỉnh tỷ lệ phần tử trang hình mũi tên ví dụ rộng hơn 50% và chỉ có 80% chiều cao hiện tại, trong khi vẫn giữ nguyên vị trí tâm của mũi tên và duy trì hướng của mũi tên.

Bạn có thể thực hiện việc này bằng cách sử dụng tính năng biến đổi tỷ lệ cơ bản trong khung tham chiếu của phần tử. Để cho rõ ràng, hiệu ứng chuyển đổi và chia tỷ lệ khung tham chiếu được hiển thị với 3 lệnh gọi riêng biệt đối với phương thức UpdatePageElementTransformRequest. Tuy nhiên, việc tính toán trước tích của các ma trận biến đổi này sẽ hiệu quả hơn, sau đó áp dụng sản phẩm đó dưới dạng một yêu cầu duy nhất.

Đối với phép biến đổi biến đổi, tâm của hình mũi tên sẽ được di chuyển đến và từ gốc. Giá trị tham số được biểu thị dưới dạng phép tính để đảm bảo sự rõ ràng.

Sau đây là giao thức yêu cầu để đổi kích thước một phần tử:

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"
        }
      }
    }
  ]
}

Xoay một phần tử quanh tâm của phần tử đó

Mã mẫu presentations.batchUpdate sau đây cho biết cách sử dụng phương thức UpdatePageElementTransformRequest để xoay phần tử trang hình dạng mũi tên 35 độ ngược chiều kim đồng hồ, trong khi vẫn giữ chính giữa của mũi tên ở cùng một vị trí và duy trì kích thước của trang.

Bạn có thể thực hiện việc này bằng cách sử dụng biến đổi xoay cơ bản trong khung tham chiếu của phần tử. Để rõ ràng, việc dịch chuyển và xoay khung tham chiếu được hiển thị bằng 3 lệnh gọi riêng biệt đến phương thức UpdatePageElementTransformRequest, nhưng hiệu quả hơn là tính toán trước tích của các ma trận biến đổi này rồi áp dụng tích đó dưới dạng một yêu cầu duy nhất

Đối với phép biến đổi biến đổi, tâm của hình mũi tên sẽ được di chuyển đến và từ gốc. Để rõ ràng, các giá trị tham số được thể hiện dưới dạng phép tính.

Sau đây là giao thức yêu cầu xoay một phần tử quanh tâm của phần tử đó:

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"
        }
      }
    }
  ]
}