Định kích thước và định vị các phần tử trang

Có hai cách để bạn có thể lấy và thay đổi kích thước cũng như vị trí của một phần tử trang:

  1. Sử dụng các hàm getter và setter để xác định kích thước và vị trí.
  2. Thao tác với phép biến đổi affine, sử dụng các hàm getTransform()setTransform() trong khi vẫn giữ nguyên kích thước vốn có.

Đọc thuộc tính phần tử trang

Định cỡ và xoay

Như trong hình, kích thước và vị trí được đo lường theo hộp giới hạn của một phần tử trang được kết xuất khi phần tử không có chế độ xoay:

  • TráiTrên cùng: được đo từ góc trên bên trái của trang đến góc trên bên trái của hộp giới hạn chưa xoay. Sử dụng getLeft()getTop() để đọc các giá trị.
  • Width (Chiều rộng) và Height (Chiều cao): chiều rộng và chiều cao của hộp giới hạn chưa xoay. Sử dụng getWidth()getHeight() để đọc các giá trị.
  • Rotation (Xoay): xoay theo chiều kim đồng hồ so với đường dọc xung quanh tâm của hộp giới hạn. Sử dụng getRotation() để đọc giá trị.

Tất cả chiều dài đều được đo bằng điểm (pt). Độ xoay được đo bằng độ (°).

Đặt thuộc tính phần tử trang

Bạn có thể đặt kích thước và vị trí của một phần tử trang khi tạo phần tử đó bằng cách sử dụng phương thức chèn, chẳng hạn như insertShape(). Đối với hình dạng hiện có, bạn có thể đặt kích thước, vị trí và chế độ xoay; bạn cũng có thể đặt tỷ lệ của một phần tử để đổi kích thước hoặc phản ánh phần tử đó dọc theo một trong các cạnh của hình dạng đó.

Khi tạo

Bạn có thể cung cấp thông tin về vị trí và kích thước khi tạo một phần tử trang.

var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 100, 200, 300, 60);
Logger.log('Left: ' + shape.getLeft() + 'pt; Top: '
                    + shape.getTop() + 'pt; Width: '
                    + shape.getWidth() + 'pt; Height: '
                    + shape.getHeight() + 'pt; Rotation: '
                    + shape.getRotation() + ' degrees.');

Tập lệnh ở trên tạo một hình dạng trên trang trình bày đầu tiên của bản trình bày đang hoạt động với vị trí và kích thước đã chỉ định, đồng thời đọc thông tin về vị trí và kích thước của hình dạng đó. Nhật ký dự kiến là:

Left: 100pt; Top: 200pt; Width: 300pt; Height: 60pt; Rotation: 0 degrees.

Kích thước, vị trí và chế độ xoay

Bạn có thể cập nhật kích thước và vị trí của một phần tử trang sau khi tạo:

  • Sử dụng setLeft()setTop() để đặt vị trí của góc trên bên trái của hộp giới hạn chưa xoay.
  • Sử dụng setWidth()setHeight() để đặt chiều rộng và chiều cao được kết xuất cho hộp giới hạn.
  • Sử dụng setRotation() để đặt chế độ xoay theo chiều kim đồng hồ của hộp giới hạn xung quanh tâm của hộp.

Tập lệnh sau đây tạo một hình dạng trên trang trình bày đầu tiên của bản trình bày đang hoạt động, sử dụng phương thức setter để cập nhật vị trí, kích thước và độ xoay của hình dạng, đồng thời đọc thông tin vị trí và kích thước của hình dạng.

var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setLeft(100).setTop(200).setWidth(50).setHeight(60).setRotation(90);
Logger.log('Left: ' + shape.getLeft()
                    + 'pt; Top: ' + shape.getTop()
                    + 'pt; Width: ' + shape.getWidth()
                    + 'pt; Height: ' + shape.getHeight()
                    + 'pt; Rotation: ' + shape.getRotation() + '\u00B0.');

Dưới đây là kết quả nhật ký dự kiến từ tập lệnh này:

Left: 100pt; Top: 200pt; Width: 50pt; Height: 60pt; Rotation: 90°.

Bạn có thể sử dụng phương thức setter kích thước, vị trí và phương thức xoay theo bất kỳ thứ tự hoặc cách kết hợp nào. Thay thế dòng thứ ba ở trên bằng tập lệnh sau sẽ cho ra kết quả tương tự:

shape.setWidth(55);
shape.setRotation(90).setHeight(60).setLeft(100);
shape.setWidth(50).setTop(200);

Chuyển tỷ lệ

Thay vì sử dụng setWidth()setHeight() ở trên để đặt kích thước của hình dạng thành một giá trị tuyệt đối, bạn có thể sử dụng scaleWidth()scaleHeight() để kéo giãn hoặc thu hẹp một phần tử trang bằng hệ số tỷ lệ tương đối.

shape.scaleHeight(0.5).scaleWidth(2);

Hình dưới đây mô tả cách mã ở trên hoạt động trên hình vuông xoay 45°. Xin lưu ý rằng góc trên bên trái của hộp giới hạn được cố định trong quá trình điều chỉnh theo tỷ lệ.

Điều chỉnh theo tỷ lệ trang trình bày

Phản chiếu dọc theo cạnh

Đối số trong scaleWidth()scaleHeight() có thể là giá trị âm để có thể dùng các đối số này nhằm lật một phần tử trang theo chiều ngang hoặc chiều dọc.

shape.scaleWidth(-1); // Flip horizontally along the left edge of the bounding box.
shape.scaleHeight(-1); // Flip vertically along the top edge of the bounding box.

Hình dưới đây mô tả cách mã ở trên hoạt động trên một hình dạng xoay 45°. Xin lưu ý rằng phần tử trang được lật dọc theo một trong các cạnh của hộp giới hạn nhưng không phải ở giữa.

Suy ngẫm về trang trình bày

Xoay đường kẻ

Giống như các phần tử trang khác, độ xoay của một đường không phải là góc dọc của đường đó mà là độ xoay của hộp giới hạn. Khi bạn tạo một đường kẻ có điểm bắt đầu và điểm kết thúc được chỉ định, độ xoay của đường kẻ đó luôn là 0°. Việc kéo các điểm cuối của đường kẻ trong giao diện người dùng Google Trang trình bày sẽ thay đổi góc dọc cũng như kích thước và vị trí của hộp giới hạn, nhưng không thay đổi độ xoay của đường kẻ. Việc sử dụng setRotation() sẽ xoay hộp giới hạn của đường thẳng, giúp thay đổi hiệu quả góc dọc của đường thẳng. Vì vậy, hai đường có thể có cùng một góc dọc trực quan, nhưng hộp giới hạn khác nhau và do đó, kích thước, vị trí và giá trị xoay cũng khác nhau.

Các điểm hạn chế

Một số phương thức định kích thước và định vị không tương thích với một số loại phần tử trang. Bảng dưới đây tóm tắt các phương thức không tương thích với một số loại phần tử trang.

Phương thức Hình dạng Video Bảng
getHeight(), getWidth() NO (trả về giá trị rỗng)
setHeight(), setWidth() KHÔNG
setRotation() KHÔNG KHÔNG
scaleHeight(), scaleWidth() KHÔNG

Tất cả phương thức định kích thước và định vị có thể cho kết quả không mong muốn nếu phần tử trang bị cắt. Tất cả các giới hạn đều có thể thay đổi. Hãy tham khảo tài liệu để biết thông tin mới nhất.

Sử dụng phép biến đổi affine

Để kiểm soát nâng cao, bạn cũng có thể tính toán và điều chỉnh kích thước và vị trí của một phần tử trang thông qua kích thước vốn có (gốc) và biến đổi affine.

Google Apps Script cung cấp giao diện tương tự để sử dụng phép biến đổi affine như API Google Trang trình bày.

  • Để đọc, bài viết này giải thích các khái niệm về phép biến đổi affine và cách suy luận kích thước kết xuất từ kích thước vốn có (gốc) và phép biến đổi cho các phần tử trang. Trong Apps Script, hãy sử dụng
    • getInherentWidth()getInherentHeight() cho kích thước gốc của các phần tử trang;
    • getTransform() cho phép biến đổi affine của các phần tử trang.
  • Để viết, bài viết này mô tả cách định cỡ và định vị các phần tử trang bằng phép biến đổi affine để đạt được tỷ lệ, xoay, phản chiếu, v.v. Trong Apps Script, hãy sử dụng
    • setTransform() để đặt phép biến đổi affine của các phần tử trang (tương tự như chế độ ABSOLUTE);
    • preconcatenateTransform() để nối trước một phép biến đổi affine với phép biến đổi hiện tại của các phần tử trang (tương tự như chế độ RELATIVE).

Tập lệnh sau đây tạo một hình dạng, đặt phép biến đổi, đọc kích thước vốn có và đọc phép biến đổi affine.

var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setTransform(SlidesApp.newAffineTransformBuilder()
                   .setScaleX(2)
                   .setScaleY(1)
                   .setTranslateX(100)
                   .setTranslateY(200)
                   .build());
Logger.log('Inherent width: ' + shape.getInherentWidth()
                              + 'pt; Inherent height: '
                              + shape.getInherentHeight() + 'pt.');

Dưới đây là kết quả nhật ký dự kiến từ tập lệnh này:

Inherent width: 236.2pt; Inherent height: 236.2pt.

Hình dạng thu được sẽ có phép biến đổi, kích thước và vị trí kết xuất sau:

AffineTransform{scaleX=2.0, scaleY=1.0, shearX=0.0, shearY=0.0, translateX=100.0, translateY=200.0}
Left: 100pt; Top: 200pt; Width: 472.4pt; Height: 236.2pt; Rotation: 0°.