Biến đổi thao tác

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

Những 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ị cho 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ã đối tượng trang. Bạn có thể truy xuất giá trị cho URL 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ử 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. Bạn có thể truy xuất mã phần tử thông qua yêu cầu đọc API.

Những ví dụ này được trình bày dưới dạng yêu cầu HTTP nhằm đảm bảo trung lập về ngôn ngữ. Để tìm hiểu cách triển khai việc cập nhật theo lô ở nhiều ngôn ngữ bằ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 một 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 căn chỉnh với ví dụ về hình dạng mũi tên trên trang. Trong cả hai trường hợp, bạn phải tính 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 100 x 50 pt được căn chỉnh theo đường viề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 ra một vòng tròn rộng 40 pt có cùng đường tâm nằm ngang như mũi tên ví dụ, nhưng được đặt ở vị trí 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 của 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 bằng 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 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 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 mẫu 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 (X,Y) = (2000000, 150000) toạ độ EMU (sử dụng tính năng dịch 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 được dùng để biến đổi kích thước applyModeđược dùng để tránh applyModethay đổi kích thước của ma trận.applyMode

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 nằm ở toạ độ (X,Y) = (2040000, 115000) EMU.

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 yếu 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 mẫu theo chiều ngang dọc theo tâm mà không 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ử. Để cho rõ ràng, quá trình chuyển đổi và phản chiếu 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, nhưng sẽ hiệu quả hơn nếu bạn tính toán trước sản phẩm của các ma trận biến đổi này rồi áp dụng sản phẩm đó dưới dạng một yêu cầu duy nhất.

Đối với biến đổi bản dịch, tâm của hình dạng mũi tên được di chuyển đến và rời khỏi điểm 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 để 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 dạng mũi tên mẫu để rộng hơn 50% và chỉ có 80% chiều cao hiện tại, trong khi vẫn giữ nguyên chính giữa của mũi tên và giữ nguyên hướng.

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 biến đổi bản dịch, tâm của hình dạng mũi tên được di chuyển đến và rời khỏi điểm 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ử. Để cho rõ ràng, thao tác dịch chuyển và xoay 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, nhưng sẽ hiệu quả hơn nếu bạn 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 sản phẩm đó dưới dạng một yêu cầu duy nhất

Đối với biến đổi bản dịch, tâm của hình dạng mũi tên được di chuyển đến và rời khỏi điểm 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 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"
        }
      }
    }
  ]
}