EditContext: updateCharacterBounds() Methode

Die Berechnung der Zeichenbegrenzungen und der synchrone Aufruf von updateCharacterBounds innerhalb des characterboundsupdate Ereignisses stellt sicher, dass das Betriebssystem die benötigten Informationen hat, wenn es das IME-Fenster anzeigt. Wenn Sie updateCharacterBounds() nicht synchron innerhalb des Ereignis-Handlers aufrufen, können Benutzer beobachten, dass das IME-Fenster zunächst an der falschen Position angezeigt wird, bevor es an die richtige Position verschoben wird.

Die updateCharacterBounds() Methode sollte nur aufgerufen werden, wenn das Betriebssystem angibt, dass es die Informationen benötigt, und nur für die Zeichen, die in der aktuellen IME-Komposition enthalten sind.

Das an den characterboundsupdate Ereignis-Handler übergebene Ereignisobjekt enthält rangeStart und rangeEnd Eigenschaften, die den Bereich der derzeit komponierten Zeichen angeben. Die updateCharacterBounds() Methode sollte nur für die Zeichen in diesem Bereich aufgerufen werden.

rangeStart

Eine Zahl, die den Beginn des Textbereichs angibt, für den Zeichenbegrenzungen bereitgestellt werden.

characterBounds

Ein Array, das DOMRect Objekte enthält, die die Zeichenbegrenzungen darstellen.

• Wenn weniger als zwei Argumente bereitgestellt werden, wird ein TypeError DOMException ausgelöst.
• Wenn rangeStart keine Zahl ist oder characterBounds nicht iterierbar ist, wird ein TypeError DOMException ausgelöst.

Dieses Beispiel zeigt, wie die updateCharacterBounds Methode verwendet wird, um die Zeichenbegrenzungen im EditContext eines <canvas> Elements zu aktualisieren, wenn das Betriebssystem angibt, dass es die Informationen benötigt. Beachten Sie, dass der characterboundsupdate Ereignis-Listener-Callback in diesem Beispiel nur aufgerufen wird, wenn ein IME-Fenster oder andere plattformspezifische Bearbeitungsoberflächen zum Komponieren von Text verwendet werden.

<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);
});

• Die EditContext Schnittstelle, zu der sie gehört.