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. Đâ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ã nhận dạng đố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ử có 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 sau (có thể tìm thấy bằng yêu cầu phương thức presentations.pages.get). Hình dạng mẫu sử dụng thông tin đo lường unit EMU (Đơn vị đo lườ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 bên trái của hình chữ nhật đó đượ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 thực thi căn chỉnh đường tâm cho vòng tròn mới đòi hỏi 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ố tỷ lệ liên kết với mũi tên vì chúng ả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 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, độ lệch 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 biến đổi tỷ lệ cơ bản trong khung tham chiếu của phần tử. Để rõ ràng, độ lệch và tỷ lệ 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 đổ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 mũi tên ví dụ 35 độ ngược chiều kim đồng hồ, trong khi vẫn giữ tâm của mũi tên ở cùng vị trí và duy trì kích thước 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 biến đổi xoay cơ bản trong khung tham chiếu của phần tử. Để rõ ràng, chuyển đổi 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"
        }
      }
    }
  ]
}