EditContext: событие characterboundsupdate

Событие characterboundsupdate срабатывает, когда операционная система нуждается в границах определенных символов в области редактируемого текста объекта EditContext.

Это происходит, когда операционная система нуждается в отображении платформенно-специфической пользовательской интерфейсной поверхности для редактирования, например, окна Input Method Editor (IME).

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

Для получения дополнительной информации о том, когда и как использовать событие characterboundsupdate, обратитесь к документации метода updateCharacterBounds.

Используйте имя события в методах, например, addEventListener(), или задайте обработчик события.

addEventListener("characterboundsupdate", (event) => {});

oncharacterboundsupdate = (event) => {};

Объект CharacterBoundsUpdateEvent. Наследуется от Event.

Помимо перечисленных ниже свойств, доступны свойства из родительского интерфейса Event.

CharacterBoundsUpdateEvent.rangeStart Только для чтения

Смещение первого символа в тексте редактируемой области, для которого операционной системе необходимы границы.

CharacterBoundsUpdateEvent.rangeEnd Только для чтения

Смещение последнего символа в тексте редактируемой области, для которого операционной системе необходимы границы.

Этот пример демонстрирует, как использовать метод updateCharacterBounds для обновления границ символов в EditContext элемента canvas при указании операционной системой необходимости этой информации. Обратите внимание, что обработчик события вызывается только при использовании окна 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));
  }

  console.log("The required character bounds are", charBounds);
  editContext.updateCharacterBounds(e.rangeStart, charBounds);
});