Biến đổi thao tác

API Google Trang trình bày cho phép bạn chỉnh sửa 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 trang, trong khi vẫn giữ các đường thẳng, giữ nguyên các điểm và các đường song song. Những phép biến đổi này được gọi là quy tắc chuyển đổi affin. 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 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 nơi 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 qua URL của bản trình bày.
  • PAGE_ID – Cho biết nơi bạn cung cấp mã đối tượng trang. Bạn có thể truy xuất giá trị cho truy vấn 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 nơi bạn cung cấp mã đối tượng của 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ố quy định hạn chế) hoặc cho phép API Trang trình bày tự động tạo giá trị. 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 để trung lập về 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 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.

Hình dạng mũi tên ví dụ

Đối với những ví dụ bên dưới, giả sử tồn tại phần tử trang hình mũi tên mẫu có kích thước và dữ liệu biến đổi như sau (có thể tìm thấy bằng yêu cầu phương thức presentations.pages.get). Hình dạng trong ví dụ sử dụng thông số đo lường unit EMU (Đơn vị hệ mét 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 hình dạng mới ở đúng vị trí được 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, toạ độ X và Y của góc trên bên trái của hình dạng mới phải được tính toán.

Yêu cầu đầu tiên sẽ tạo một hình chữ nhật 100 x 50 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ùng 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 để căn chỉnh đường viền trái. Toạ độ Y giống với toạ độ Y của mũi tên cộng thêm 50 pt, vì khoảng cách được tính 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 chính giữa theo chiều 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 mũi tên và 100 pt. Việc căn chỉnh đường giữa 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 đường tròn là toạ độ Y của mũi tên cộng với nửa chiều cao mũi tên trừ một nửa chiều cao hình tròn. Trong cả hai trường hợp, hệ số điều chỉnh theo tỷ lệ liên quan đến mũi tên cũng phải được tính đế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 đườ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.

Yêu cầu đầu tiên trong lô di chuyển mũi tên sang (X,Y) = (2000000, 150000) toạ độ EMU (sử dụng phép dịch tuyệt đối applyMode). Yêu cầu thứ hai trong lô di chuyển mũi tên từ đó, lần này 40.000 EMU sang phải và 35.000 EMU hướng lên trên (sử dụng phép biến đổi applyMode1 được tạo cho phép biến đổi ma trận).

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 tại 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 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 dạng mũi tên mẫu 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 theo tỷ lệ.

Bạn có thể thực hiện việc này bằng cách dùng một biến đổi phản chiếu cơ bản trong khung tham chiếu của phần tử. Để làm rõ, sự thay đổi và phản chiếu khung tham chiếu sẽ hiển thị với 3 lệnh gọi riêng biệt đến phương thức UpdatePageElementTransformRequest, nhưng 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.

Đối với biến đổi bản dịch, tâm của hình mũi tên được di chuyển đến và từ điểm gốc. Các giá trị tham số được biểu thị dưới dạng phép tính để đảm bảo tính 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 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 để đ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 tâm của mũi tên ở cùng một vị trí và duy trì hướng của phần tử đó.

Bạn có thể thực hiện việc này bằng cách dùng biến đổi tỷ lệ cơ bản trong khung tham chiếu của phần tử. Để cho rõ ràng, việc thay đổi và điều chỉnh tỷ lệ khung tham chiếu sẽ hiển thị với 3 lệnh gọi riêng biệt tới phương thức UpdatePageElementTransformRequest, nhưng 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.

Đối với biến đổi bản dịch, tâm của hình mũi tên được di chuyển đến và từ điểm gốc. Các giá trị tham số được biểu thị dưới dạng phép tính để đảm bảo tính 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ử ở khoảng giữ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 mẫu một góc 35 độ ngược chiều kim đồng hồ, trong khi vẫn giữ nguyên tâm của mũi tên ở cùng một vị trí và giữ nguyên kích thước.

Bạn có thể thực hiện việc này bằng cách dùng một biến đổi xoay cơ bản trong khung tham chiếu của phần tử. Để cho rõ ràng, sự thay đổi và xoay khung tham chiếu sẽ hiển thị với 3 lệnh gọi riêng biệt tới phương thức UpdatePageElementTransformRequest, nhưng hiệu quả hơn nếu 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

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

Sau đây là giao thức yêu cầu để xoay một phần tử về 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"
        }
      }
    }
  ]
}