EditContext: updateCharacterBounds() Methode

rangeStart

Eine Zahl, die den Beginn des Textbereichs darstellt, für den die Zeichenbegrenzungen angegeben werden.

characterBounds

Ein Array enthaltend DOMRect Objekte, die die Zeichenbegrenzungen darstellen.

Keiner (undefined).

TypeError

Ausgelöst, wenn die Methode mit weniger als zwei Argumenten aufgerufen wird oder wenn das erste Argument keine Zahl ist oder das zweite Argument nicht iterierbar ist (wie ein Array).

Das Berechnen der Zeichenbegrenzungen und das synchrone Aufrufen 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 Ereignishandlers aufrufen, können Nutzer beobachten, dass das IME-Fenster an der falschen Position angezeigt wird, bevor es an die korrekte 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 Ereignisobjekt, das an den characterboundsupdate Ereignishandler übergeben wird, enthält rangeStart und rangeEnd Eigenschaften, die den Bereich der Zeichen angeben, die derzeit komponiert werden. Die updateCharacterBounds() Methode sollte nur für die Zeichen in diesem Bereich aufgerufen werden.

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 Ereignislistener-Callback in diesem Beispiel nur aufgerufen wird, wenn ein IME-Fenster oder andere plattformspezifische Bearbeitungsoberflächen verwendet werden, um Text zu komponieren.

<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.