CharacterBoundsUpdateEvent

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das CharacterBoundsUpdateEvent-Interface ist ein DOM-Ereignis, das eine Anfrage des Betriebssystems darstellt, um die Grenzen bestimmter Zeichen innerhalb eines bearbeitbaren Bereichs zu kennen, der einer EditContext-Instanz zugeordnet ist.

Dieses Interface erbt Eigenschaften von Event.

Event CharacterBoundsUpdateEvent

Konstruktor

CharacterBoundsUpdateEvent()

Erstellt ein neues CharacterBoundsUpdateEvent-Objekt.

Instanz-Eigenschaften

CharacterBoundsUpdateEvent.rangeStart Schreibgeschützt

Der Versatz des ersten Zeichens innerhalb des Textes des bearbeitbaren Bereichs, für den das Betriebssystem die Grenzen benötigt.

CharacterBoundsUpdateEvent.rangeEnd Schreibgeschützt

Der Versatz des letzten Zeichens innerhalb des Textes des bearbeitbaren Bereichs, für den das Betriebssystem die Grenzen benötigt.

Beispiele

Aktualisieren der Zeichenbegrenzungen bei Bedarf

Dieses Beispiel zeigt, wie das characterboundsupdate-Ereignis und die updateCharacterBounds-Methode verwendet werden, um das Betriebssystem über die benötigten Zeichenbegrenzungen zu informieren. Beachten Sie, dass der Rückruf des Ereignis-Listeners nur aufgerufen wird, wenn ein IME-Fenster oder andere plattformspezifische Bearbeitungsoberflächen zur Texteingabe verwendet werden.

html
<canvas id="editor-canvas"></canvas>
js
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));
  }

  // Update the character bounds in the EditContext instance.
  editContext.updateCharacterBounds(e.rangeStart, charBounds);

  console.log(
    "The required character bounds are",
    charBounds
      .map(
        (bound) =>
          `(x: ${bound.x}, y: ${bound.y}, width: ${bound.width}, height: ${bound.height})`,
      )
      .join(", "),
  );
});

Spezifikationen

Specification
EditContext API
# dom-characterboundsupdateevent

Browser-Kompatibilität