Google Slides API cho phép bạn điều chỉnh vị trí, kích thước và hướng của một 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 cũng như đường song song. Các phép biến đổi này được gọi là phép biến đổi á-phin. Các ví dụ ở đây minh hoạ một số thao tác biến đổi phần tử trang phổ biến bằng phương thức presentations.batchUpdate.
Các ví dụ này sử dụng những 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ể tìm thấy giá trị của mã nhận dạng này trong URL trình bày.
- PAGE_ID – Cho biết nơi bạn cung cấp mã nhận dạng đối tượng trang. Bạn có thể truy xuất giá trị cho tham số 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 Slides API 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ụ thuộc vào ngôn ngữ. Để tìm hiểu cách triển khai một 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 Google API, hãy xem phần Thêm hình dạng và văn bản.
Ví dụ về hình 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 ví dụ có 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 ví dụ sử dụng đơn vị đo lường unit EMU (Đơn vị đo lường theo hệ đ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 một phần tử khác
Mã mẫu presentations.batchUpdate sau đây cho thấy 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 hình 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 cùng bên trái của hình dạng mới.
Yêu cầu đầu tiên tạo ra một hình chữ nhật có kích thước 100 x 50 pt được căn chỉnh theo đườ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 để giữ cho đường viền bên trái của mũi tên được căn chỉnh. 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 đ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 hình tròn rộng 40 pt có cùng đường tâm ngang như mũi tên ví dụ, nhưng được đặt 100 pt (1.270.000 EMU) ở bên phải cạnh phải của mũi tên. Toạ độ X của hình 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. Để thực thi việc căn chỉnh đường trung tâm cho vòng tròn mới, bạn cần tính đến chiều cao của cả mũi tên và vòng tròn. Toạ độ Y của hình tròn là toạ độ Y của mũi tên cộng với một nửa chiều cao mũi tên trừ đi một nửa chiều cao hình 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 hình 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ẫu mã presentations.batchUpdate sau đây cho thấy cách sử dụng phương thức UpdatePageElementTransformRequest để dịch phần tử trang ví dụ về hình mũi tên theo 2 cách khác nhau.
Yêu cầu đầu tiên trong lô di chuyển mũi tên đến toạ độ (X,Y) = (2000000, 150000) EMU (sử dụng phép tịnh tiến tuyệt đối
applyMode). Yêu cầu thứ hai trong lô 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 phép tịnh tiến tương đối applyMode). Ma trận transformation1 được dùng được tạo để tránh làm thay đổi kích thước và hướng của phần tử.
Sau khi thực hiện cả hai yêu cầu, góc trên cùng bên trái của mũi tên sẽ 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 chiếu một phần tử
Mẫu mã presentations.batchUpdate sau đây cho thấy cách sử dụng phương thức UpdatePageElementTransformRequest để phản chiếu phần tử trang ví dụ về hình mũi tên 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 tỷ lệ.
Việc này được thực hiện 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, sự thay đổi và phản chiếu khung tham chiếu được thể hiện bằng 3 lệnh gọi riêng biệt đến 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 tích đó dưới dạng một yêu cầu duy nhất.
Đối với các phép biến đổi bản dịch, tâm của hình mũi tên được di chuyển đến và đi từ điểm gốc. Các giá trị tham số được thể hiện dưới dạng phép tính để rõ ràng hơn.
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ẫu mã 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 ví dụ về hình mũi tên sao cho rộng hơn 50% và chỉ có 80% chiều cao hiện tại, đồng thời giữ nguyên vị trí tâm và hướng của mũi tên.
Việc này được thực hiện 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, sự thay đổi và tỷ lệ khung tham chiếu được thể hiện bằng 3 lệnh gọi riêng biệt đến 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, sau đó áp dụng tích đó dưới dạng một yêu cầu duy nhất.
Đối với các phép biến đổi bản dịch, tâm của hình mũi tên được di chuyển đến và đi từ điểm gốc. Các giá trị tham số được thể hiện dưới dạng phép tính để rõ ràng hơn.
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ẫu mã presentations.batchUpdate sau đây cho thấy cách dùng phương thức UpdatePageElementTransformRequest để xoay phần tử trang ví dụ về hình mũi tên 35 độ ngược chiều kim đồng hồ, đồng thời giữ tâm của mũi tên ở cùng một 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 phép biến đổi xoay cơ bản trong khung tham chiếu của phần tử. Để rõ ràng, sự thay đổi và xoay khung tham chiếu được thể hiện bằng 3 lệnh gọi riêng biệt đến 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 tích đó dưới dạng một yêu cầu duy nhất
Đối với các phép biến đổi bản dịch, tâm của hình mũi tên được di chuyển đến và đi từ điểm gốc. Các giá trị tham số được thể hiện dưới dạng phép tính để rõ ràng hơn.
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"
}
}
}
]
}