EditContext: метод updateCharacterBounds()

Метод EditContext.updateCharacterBounds() интерфейса EditContext должен вызываться в ответ на событие characterboundsupdate, чтобы сообщить операционной системе о положении и размерах символов в объекте EditContext.

Событие characterboundsupdate — это единственный случай, когда требуется вызов метода updateCharacterBounds().

Информация о границах символов затем используется операционной системой для правильного позиционирования окна редактора ввода (IME) при необходимости. Это особенно важно в ситуациях, когда операционная система не может автоматически определить положение и размер символов, например, при отображении текста в элементе <canvas>.

Вычисление границ символов и вызов updateCharacterBounds синхронно, в рамках события characterboundsupdate гарантирует, что операционная система имеет необходимую информацию при отображении окна IME. Если вы не вызываете updateCharacterBounds() синхронно внутри обработчика события, пользователи могут заметить, что окно IME отображается в неправильном положении перед перемещением в правильное положение.

Метод updateCharacterBounds() должен вызываться только тогда, когда операционная система указывает, что ей нужна информация, и только для символов, включенных в текущую композицию IME.

Объект события, переданный в обработчик события characterboundsupdate , содержит свойства rangeStart и rangeEnd , которые указывают на диапазон символов, которые в настоящее время компонуются. Метод updateCharacterBounds() должен вызываться только для символов в этом диапазоне.

rangeStart

Число, представляющее начало диапазона текста, для которого предоставляются границы символов.

characterBounds

Массив Array содержащий объекты DOMRect, представляющие границы символов.

• Если предоставлено меньше двух аргументов, выбрасывается исключение TypeError DOMException.
• Если rangeStart не является числом или characterBounds не является итерируемым, выбрасывается исключение TypeError DOMException.

Этот пример демонстрирует, как использовать метод updateCharacterBounds для обновления границ символов в EditContext элемента <canvas> , когда операционная система указывает, что ей нужна эта информация. Обратите внимание, что обработчик событий characterboundsupdate в этом примере вызывается только при использовании окна IME или других платформ-специфичных интерфейсов редактирования для составления текста.

<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) {
  // Measure the width from the start of the text to the character.
  const widthBeforeChar = ctx.measureText(
    editContext.text.substring(0, offset),
  ).width;

  // Measure the character width.
  const charWidth = ctx.measureText(editContext.text[offset]).width;

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

  // Return a DOMRect representing the character bounds.
  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);
});

• Интерфейс EditContext, к которому он относится.