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à duy trì các điểm cũng như đường thẳng song song. Những thao tác này được gọi là phép 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 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 nơi bạn cung cấp mã bản trình bày. Bạn có thể tìm thấy giá trị cho mã này trong 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 mã 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 phần tử trang. Bạn có thể chỉ định mã 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ột mã. Bạn có thể truy xuất mã 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 tính năng cập nhật theo lô bằng nhiều ngôn ngữ thông qua các thư viện ứng dụng API của Google, hãy xem bài viết 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ụ bên dưới, hãy giả sử rằng có một phần tử trang hình mũi tên mẫu có kích thước và dữ liệu biến đổi sau đây (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 đơn vị đo lường
unit EMU (Đơn vị đo lường theo hệ mét của 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 sau đây
presentations.batchUpdate
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
hình mũi tên mẫu 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 một hình chữ nhật có kích thước 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 để giữ cho đường viền bê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ừ đỉnh của 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 có chiều rộng 40 pt có cùng đường tâm ngang với mũi tên mẫu, 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 hình 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. Để bắt buộc căn chỉnh đường tâm cho hình tròn mới, bạn cần tính đến chiều cao của cả mũi tên và hình 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 của mũi tên trừ đi một nửa chiều cao của 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ì các hệ số này ảnh hưởng đến chiều rộng và chiều cao được hiển thị 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 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 mẫu 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 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 là 40.000 EMU
sang phải và 35.000 EMU lên trên (sử dụng phép dịch tương đối applyMode).
Các ma trận transformation1 được sử dụng
được xây dựng để tránh làm 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 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ã mẫu
presentations.batchUpdate
sau đây cho biết cách sử dụng phương thức
UpdatePageElementTransformRequest
để phản chiếu phần tử trang hình 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í trên trang hoặc
tỷ lệ.
Bạn thực hiện việc này bằng cách sử dụng phép biến đổi phản chiếu cơ bản trong khung tham chiếu của phần tử. Để cho rõ ràng, phép dịch chuyển khung tham chiếu và phép 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 sẽ 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, 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 dịch chuyển, tâm của hình mũi tên được di chuyển đến và từ gốc. Các giá trị tham số được biểu thị dưới dạng phép tính để cho rõ ràng.
Sau đây là giao thức yêu cầu để phản chiếu 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
để chuyển tỉ lệ phần tử trang hình mũi tên mẫu sao cho rộng hơn 50%
và chỉ có 80% chiều cao hiện tại, đồng thời giữ cho tâm của mũi tên
ở cùng một vị trí và duy trì hướng của mũi tên.
Bạn thực hiện việc này bằng cách sử dụng phép biến đổi tỷ lệ cơ bản trong khung tham chiếu của phần tử. Để cho rõ ràng, phép dịch chuyển khung tham chiếu và phép điều chỉnh tỷ lệ được hiển thị 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 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 dịch chuyển, tâm của hình mũi tên được di chuyển đến và từ gốc. Các giá trị tham số được biểu thị dưới dạng phép tính để cho 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 sau đây
presentations.batchUpdate
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 35
độ ngược chiều kim đồng hồ, đồng thời giữ cho 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 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ử. Để cho rõ ràng, phép dịch chuyển khung tham chiếu và phép xoay được hiển thị 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 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 dịch chuyển, tâm của hình mũi tên được di chuyển đến và từ gốc. Các giá trị tham số được biểu thị dưới dạng phép tính để cho 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"
}
}
}
]
}