EditContext: updateCharacterBounds() method

Cú pháp

updateCharacterBounds(rangeStart, characterBounds)

Tham số

rangeStart

Một số đại diện cho điểm bắt đầu của phạm vi văn bản mà kích thước bao quanh ký tự được cung cấp.

characterBounds

Một Array chứa các đối tượng DOMRect đại diện cho kích thước bao quanh ký tự.

Giá trị trả về

Không có (undefined).

Ngoại lệ

TypeError

Được ném ra nếu phương thức được gọi với ít hơn hai tham số, hoặc nếu tham số đầu tiên không phải là số hay tham số thứ hai không thể lặp (như mảng).

Lưu ý khi sử dụng

Tránh cửa sổ IME nhảy vị trí đột ngột

Tính toán kích thước bao quanh ký tự và gọi updateCharacterBounds đồng bộ, trong sự kiện characterboundsupdate, đảm bảo hệ điều hành có thông tin cần thiết khi hiển thị cửa sổ IME. Nếu bạn không gọi updateCharacterBounds() đồng bộ trong trình xử lý sự kiện, người dùng có thể thấy cửa sổ IME hiển thị ở vị trí sai trước khi được di chuyển đến vị trí đúng.

Ký tự nào cần đưa vào

Phương thức updateCharacterBounds() chỉ nên được gọi khi hệ điều hành cho biết nó cần thông tin, và chỉ cho các ký tự được bao gồm trong lần soạn thảo IME hiện tại.

Đối tượng sự kiện được truyền vào trình xử lý sự kiện characterboundsupdate chứa các thuộc tính rangeStart và rangeEnd cho biết phạm vi ký tự hiện đang được soạn thảo. Phương thức updateCharacterBounds() chỉ nên được gọi cho các ký tự trong phạm vi này.

Ví dụ

Cập nhật kích thước bao quanh ký tự khi cần

Ví dụ này cho thấy cách dùng phương thức updateCharacterBounds để cập nhật kích thước bao quanh ký tự trong EditContext của phần tử <canvas> khi hệ điều hành cho biết nó cần thông tin. Lưu ý rằng callback trong ví dụ này chỉ được gọi khi dùng cửa sổ IME hoặc các giao diện người dùng chỉnh sửa khác của nền tảng để soạn thảo văn bản.

<canvas id="editor-canvas"></canvas>

const FONT_SIZE = 40;
const FONT = `${FONT_SIZE}px Arial`;

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
ctx.font = FONT;

const editContext = new EditContext();
canvas.editContext = editContext;

function computeCharacterBound(offset) {
  // Đo chiều rộng từ đầu văn bản đến ký tự.
  const widthBeforeChar = ctx.measureText(
    editContext.text.substring(0, offset),
  ).width;

  // Đo chiều rộng của ký tự.
  const charWidth = ctx.measureText(editContext.text[offset]).width;

  const charX = canvas.offsetLeft + widthBeforeChar;
  const charY = canvas.offsetTop;

  // Trả về DOMRect đại diện cho kích thước bao quanh ký tự.
  return DOMRect.fromRect({
    x: charX,
    y: charY - FONT_SIZE,
    width: charWidth,
    height: FONT_SIZE,
  });
}

editContext.addEventListener("characterboundsupdate", (e) => {
  const charBounds = [];
  for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) {
    charBounds.push(computeCharacterBound(offset));
  }

  editContext.updateCharacterBounds(e.rangeStart, charBounds);
});

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Giao diện EditContext mà nó thuộc về.